From 0c7b940217541f8609829262911a01a653aef08f Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:51:59 -0500
Subject: [PATCH 01/14] (Update) ChatController API

Cache bot.
---
 app/Http/Controllers/API/ChatController.php | 27 +++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/Http/Controllers/API/ChatController.php b/app/Http/Controllers/API/ChatController.php
index 6c933f1396..c7d7fc0136 100644
--- a/app/Http/Controllers/API/ChatController.php
+++ b/app/Http/Controllers/API/ChatController.php
@@ -153,7 +153,18 @@ public function createMessage(Request $request)
             return response('error', 401);
         }
 
-        $bots = Bot::where('active', '=', 1)->orderBy('position', 'asc')->get();
+        $bot_dirty = 0;
+        $bots = cache()->get('bots');
+        if (! $bots || ! is_array($bots) || count($bots) < 1) {
+            $bots = Bot::where('active', '=', 1)->orderBy('position', 'asc')->get();
+            $bot_dirty = 1;
+        }
+
+        if($bot_dirty == 1) {
+            $expiresAt = Carbon::now()->addMinutes(60);
+            cache()->put('bots', $bots, $expiresAt);
+        }
+
         $which = null;
         $target = null;
         $runbot = null;
@@ -186,14 +197,14 @@ public function createMessage(Request $request)
                 if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '/'.$bot->command) {
                     $which = 'echo';
                 }
-                if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '!'.$bot->command) {
+                else if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '!'.$bot->command) {
                     $which = 'public';
                 }
-                if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '@'.$bot->command) {
+                else if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '@'.$bot->command) {
                     $message = substr($message, 1 + strlen($bot->command), strlen($message));
                     $which = 'private';
                 }
-                if ($message && $receiver_id == 1 && $bot->id == $bot_id) {
+                else if ($message && $receiver_id == 1 && $bot->id == $bot_id) {
                     if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '/'.$bot->command) {
                         $message = substr($message, 1 + strlen($bot->command), strlen($message));
                     }
@@ -326,17 +337,19 @@ public function createMessage(Request $request)
                 event(new Chatter('audible', $receiver_id, UserAudibleResource::collection($receiver_audibles)));
             }
 
-            $ignore = false;
             $room_id = 0;
-            if ($bot_id > 0) {
+            if ($bot_id > 0 && receiver_id == 1) {
                 $ignore = true;
+            } else {
+                $ignore = null;
             }
+            $save = true;
+            $echo = true;
             $message = $this->chat->privateMessage($user_id, $room_id, $message, $receiver_id, null, $ignore);
         } else {
             $receiver_id = null;
             $bot_id = null;
             $message = $this->chat->message($user_id, $room_id, $message, $receiver_id, $bot_id);
-            $this->chat->ping('room', $room_id);
         }
 
         if (! $save) {

From 66f0357c9de0aba3c01886ff3c4ab928932f015a Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:52:25 -0500
Subject: [PATCH 02/14] (Update) ChatRepository Repository

Update pm routine.
---
 app/Repositories/ChatRepository.php | 40 +++++++++++++++++++----------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/Repositories/ChatRepository.php b/app/Repositories/ChatRepository.php
index cd167f8e05..014606dbe1 100644
--- a/app/Repositories/ChatRepository.php
+++ b/app/Repositories/ChatRepository.php
@@ -94,7 +94,7 @@ public function echoes($user_id)
         ])->where(function ($query) use ($user_id) {
             $query->where('user_id', '=', $user_id);
         })
-            ->latest()
+            ->orderBy('id','asc')
             ->get();
     }
 
@@ -185,19 +185,31 @@ public function botMessage($bot_id, $room_id, $message, $receiver = null)
         $message->delete();
     }
 
-    public function privateMessage($user_id, $room_id, $message, $receiver = null, $bot = null, $ignore = false)
+    public function privateMessage($user_id, $room_id, $message, $receiver = null, $bot = null, $ignore = null)
     {
         if ($this->user->find($user_id)->censor) {
             $message = $this->censorMessage($message);
         }
         $message = $this->htmlifyMessage($message);
-        $save = $this->message->create([
-            'user_id'     => $user_id,
-            'chatroom_id' => 0,
-            'message' => $message,
-            'receiver_id' => $receiver,
-            'bot_id' => $bot,
-        ]);
+
+        if($bot != null) {
+            $save = $this->message->create([
+                'user_id' => $user_id,
+                'chatroom_id' => 0,
+                'message' => $message,
+                'receiver_id' => $receiver,
+                'bot_id' => $bot,
+            ]);
+        }
+        else {
+            $save = $this->message->create([
+                'user_id' => $user_id,
+                'chatroom_id' => 0,
+                'message' => $message,
+                'receiver_id' => $receiver,
+                'bot_id' => $bot,
+            ]);
+        }
 
         $message = Message::with([
             'bot',
@@ -207,12 +219,14 @@ public function privateMessage($user_id, $room_id, $message, $receiver = null, $
             'receiver.chatStatus',
         ])->find($save->id);
 
-        if ($ignore != true) {
+        if ($ignore != null) {
             event(new Chatter('new.message', $user_id, new ChatMessageResource($message)));
         }
         event(new Chatter('new.message', $receiver, new ChatMessageResource($message)));
-        event(new Chatter('new.ping', $receiver, ['type' => 'target', 'id' => $user_id]));
 
+        if($receiver != 1) {
+            event(new Chatter('new.ping', $receiver, ['type' => 'target', 'id' => $user_id]));
+        }
         return $message;
     }
 
@@ -252,8 +266,8 @@ public function botMessages($sender_id, $bot_id)
             'receiver.group',
             'receiver.chatStatus',
         ])->where(function ($query) use ($sender_id,$bot_id) {
-            $query->whereRaw('(user_id = ? and bot_id = ?)', [$sender_id, $bot_id])->orWhereRaw('(receiver_id = ? and bot_id = ?)', [$sender_id, $bot_id]);
-        })
+            $query->whereRaw('(user_id = ? and receiver_id = ?)', [$sender_id, 1])->orWhereRaw('(user_id = ? and receiver_id = ?)', [1, $sender_id]);
+        })->where('bot_id','=',$bot_id)
             ->orderBy('id', 'desc')
             ->limit(config('chat.message_limit'))
             ->get();

From 00e3e3d313116b45b731f40aa387c90e0c6989ed Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:52:49 -0500
Subject: [PATCH 03/14] (Update) Chatbox Vue

Full screen, compact.
---
 resources/js/components/chat/Chatbox.vue | 1471 +++++++++++-----------
 1 file changed, 761 insertions(+), 710 deletions(-)

diff --git a/resources/js/components/chat/Chatbox.vue b/resources/js/components/chat/Chatbox.vue
index 6992f8713b..d8e963222d 100644
--- a/resources/js/components/chat/Chatbox.vue
+++ b/resources/js/components/chat/Chatbox.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="col-md-10 col-sm-10 col-md-offset-1 chatbox" id="chatbody" audio="false">
-        <div class="clearfix visible-sm-block"></div>
-        <div class="panel panel-chat">
-            <div class="panel-heading">
+    <div :class="this.fullscreen == 1 ? `col-md-10 col-sm-10 col-md-offset-1 chatbox panel-fullscreen` : `col-md-10 col-sm-10 col-md-offset-1 chatbox`" id="chatbody" audio="false">
+        <div :class="this.fullscreen == 1 ? `clearfix visible-sm-block panel-fullscreen` : `clearfix visible-sm-block`"></div>
+        <div :class="this.fullscreen == 1 ? `panel panel-chat panel-fullscreen` : `panel panel-chat`">
+            <div class="panel-heading" id="frameHeader">
                 <div class="button-holder no-space">
                     <div class="button-left">
                         <h4>
-                        Chatbox v3.0 Beta
+                            Chatbox v3.0 Beta
                         </h4>
                     </div>
                     <div class="button-right">
@@ -16,34 +16,36 @@
                         <a href="" view="list" v-if="target < 1 && bot < 1 && tab != 'userlist'" @click.prevent="changeTab('list','userlist')" class="btn btn-xs btn-primary">
                             <i class="fa fa-users"></i> Users In {{tab}}: {{users.length}}
                         </a>
+                        <a href="#" id="panel-fullscreen" role="button" :class="this.fullscreen == 1 ? `btn btn-xs btn-success` : `btn btn-xs btn-success`" title="Toggle Fullscreen" @click.prevent="changeFullscreen()"><i :class="this.fullscreen == 1 ? `glyphicon glyphicon-resize-small` : `glyphicon glyphicon-resize-full`"></i>
+                        </a>
                     </div>
                 </div>
             </div>
-            <div class="panel-body">
+            <div class="panel-body" id="frameBody">
                 <div id="frame" @mouseover="freezeChat()" @mouseleave="unfreezeChat()">
                     <div class="content no-space">
-                        <div class="button-holder nav nav-tabs mb-5">
+                        <div class="button-holder nav nav-tabs mb-5" id="frameTabs">
                             <div class="button-left-large">
-                        <ul role="tablist" class="nav nav-tabs no-border mb-0">
-                            <li v-for="echo in echoes" v-if="echo.room && echo.room.name.length > 0"
-                                :class="tab != '' && tab === echo.room.name ? 'active' : null">
-                                <a href="" role="tab" view="room" @click.prevent="changeTab('room',echo.room.id)">
-                                    <i :class="checkPings('room',echo.room.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> {{ echo.room.name }}
-                                </a>
-                            </li>
-                            <li v-for="echo in echoes" v-if="echo.target && echo.target.id >= 3 && echo.target.username.length > 0"
-                                :class="target >= 3 && target === echo.target.id ? 'active' : null">
-                                <a href="" role="tab" view="target" @click.prevent="changeTab('target',echo.target.id)">
-                                    <i :class="checkPings('target',echo.target.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> @{{ echo.target.username }}
-                                </a>
-                            </li>
-                            <li v-for="echo in echoes" v-if="echo.bot && echo.bot.id >= 1 && echo.bot.name.length > 0"
-                                :class="bot > 0 && bot === echo.bot.id ? 'active' : null">
-                                <a href="" role="tab" view="bot" @click.prevent="changeTab('bot',echo.bot.id)">
-                                    <i :class="checkPings('bot',echo.bot.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> @{{ echo.bot.name }}
-                                </a>
-                            </li>
-                        </ul>
+                                <ul role="tablist" class="nav nav-tabs no-border mb-0" v-if="boot == 1">
+                                    <li v-for="echo in echoes" v-if="echo.room && echo.room.name.length > 0"
+                                        :class="tab != '' && tab === echo.room.name ? 'active' : null">
+                                        <a href="" role="tab" view="room" @click.prevent="changeTab('room',echo.room.id)">
+                                            <i :class="checkPings('room',echo.room.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> {{ echo.room.name }}
+                                        </a>
+                                    </li>
+                                    <li v-for="echo in echoes" v-if="echo.target && echo.target.id >= 3 && echo.target.username.length > 0"
+                                        :class="target >= 3 && target === echo.target.id ? 'active' : null">
+                                        <a href="" role="tab" view="target" @click.prevent="changeTab('target',echo.target.id)">
+                                            <i :class="checkPings('target',echo.target.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> @{{ echo.target.username }}
+                                        </a>
+                                    </li>
+                                    <li v-for="echo in echoes" v-if="echo.bot && echo.bot.id >= 1 && echo.bot.name.length > 0"
+                                        :class="bot > 0 && bot === echo.bot.id ? 'active' : null">
+                                        <a href="" role="tab" view="bot" @click.prevent="changeTab('bot',echo.bot.id)">
+                                            <i :class="checkPings('bot',echo.bot.id) ? 'fa fa-comment fa-beat text-success' : 'fa fa-comment text-danger'"></i> @{{ echo.bot.name }}
+                                        </a>
+                                    </li>
+                                </ul>
                             </div>
                             <div class="button-right-small">
                                 <div class="nav nav-tabs no-border mb-0 mt-5">
@@ -78,12 +80,11 @@
                     </div>
                 </div>
             </div>
-
-            <div class="panel-footer" v-if="tab !== 'userlist'">
+            <div class="panel-footer" id="frameFooter">
                 <chat-form
-                           @changedStatus="changeStatus"
-                           @message-sent="(o) => createMessage(o.message, o.save, o.user_id, o.receiver_id, o.bot_id)"
-                           @typing="isTyping">
+                        @changedStatus="changeStatus"
+                        @message-sent="(o) => createMessage(o.message, o.save, o.user_id, o.receiver_id, o.bot_id)"
+                        @typing="isTyping">
 
                 </chat-form>
             </div>
@@ -91,6 +92,21 @@
     </div>
 </template>
 <style lang="scss">
+    .panel-fullscreen {
+        z-index: 9999;
+        position: fixed;
+        width: 100%;
+        border: 0;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    .panel-footer {
+        padding: 5px;
+        margin: 0px;
+    }
     .mr-10 {
         margin-right: 10px;
     }
@@ -131,715 +147,749 @@
     }
 </style>
 <script>
-  import ChatroomsDropdown from './ChatroomsDropdown'
-  import ChatMessages from './ChatMessages'
-  import ChatForm from './ChatForm'
-  import ChatPms from './ChatPms'
-  import ChatUserList from './ChatUserList'
+    import ChatroomsDropdown from './ChatroomsDropdown'
+    import ChatMessages from './ChatMessages'
+    import ChatForm from './ChatForm'
+    import ChatPms from './ChatPms'
+    import ChatUserList from './ChatUserList'
 
-  export default {
-    props: {
-      user: {
-        type: Object,
-        required: true,
-      },
-    },
-    components: {
-      ChatroomsDropdown,
-      ChatMessages,
-      ChatForm,
-      ChatUserList,
-      ChatPms
-    },
-      data () {
-          return {
-              tab: '',
-              state: {
-                  connecting: true
-              },
-              auth: {},
-              statuses: [],
-              status: 0,
-              echoes: [],
-              bots: [],
-              chatrooms: [],
-              messages: [],
-              users: [],
-              pings: [],
-              audibles: [],
-              audioLoaded: 0,
-              room: 0,
-              startup: 0,
-              check: 0,
-              target: 0,
-              bot: 0,
-              activeTab: '',
-              activeBot: '',
-              activeRoom: '',
-              activeTarget: '',
-              activePeer: false,
-              botName: '',
-              botId: 0,
-              listening: 1,
-              botCommand: '',
-              helpName: '',
-              helpCommand: '',
-              frozen: false,
-              helpId: 0,
-              scroll: true,
-              channel: null,
-              chatter: null,
-              config: {},
-              receiver_id: null,
-              bot_id: null,
-          }
-      },
-    watch: {
-        chatrooms () {
-            this.changeRoom(this.auth.chatroom.id)
-        },
-        statuses () {
-            this.changeStatus(this.auth.chat_status.id)
-        },
-        room (newVal, oldVal) {
-            window.Echo.leave(`chatroom.${oldVal}`)
-            this.channel = window.Echo.join(`chatroom.${newVal}`)
-            this.listenForEvents()
-        },
-    },
-    computed: {
-        msgs () {
-            return _.filter(this.messages, (o) => {
-                return o;
-            })
-        },
-        last_id () {
-            if (this.messages > 0) {
-                return this.messages[m.length - 1].id
+    export default {
+        props: {
+            user: {
+                type: Object,
+                required: true,
+            },
+        },
+        components: {
+            ChatroomsDropdown,
+            ChatMessages,
+            ChatForm,
+            ChatUserList,
+            ChatPms
+        },
+        data () {
+            return {
+                tab: '',
+                state: {
+                    connecting: true
+                },
+                auth: {},
+                statuses: [],
+                status: 0,
+                echoes: [],
+                bots: [],
+                chatrooms: [],
+                messages: [],
+                users: [],
+                pings: [],
+                audibles: [],
+                boot: 0,
+                audioLoaded: 0,
+                room: 0,
+                fullscreen: 0,
+                startup: 0,
+                check: 0,
+                target: 0,
+                bot: 0,
+                activeTab: '',
+                activeBot: '',
+                activeRoom: '',
+                activeTarget: '',
+                activePeer: false,
+                peerRoom: 0,
+                botName: '',
+                botId: 0,
+                listening: 1,
+                botCommand: '',
+                helpName: '',
+                helpCommand: '',
+                frozen: false,
+                helpId: 0,
+                scroll: true,
+                channel: null,
+                chatter: null,
+                config: {},
+                receiver_id: null,
+                bot_id: null,
             }
-
-            return 0
         },
-        statusColor () {
-            if (this.statuses.length > 0) {
-                let i = _.findIndex(this.statuses, (o) => {
-                    return o.id === this.status
+        watch: {
+            chatrooms () {
+                this.changeRoom(this.auth.chatroom.id)
+            },
+            statuses () {
+                this.changeStatus(this.auth.chat_status.id)
+            },
+            room (newVal, oldVal) {
+                window.Echo.leave(`chatroom.${oldVal}`)
+                this.channel = window.Echo.join(`chatroom.${newVal}`)
+                this.listenForEvents()
+            },
+        },
+        computed: {
+            msgs () {
+                return _.filter(this.messages, (o) => {
+                    return o;
                 })
+            },
+            last_id () {
+                if (this.messages > 0) {
+                    return this.messages[m.length - 1].id
+                }
 
-                return this.statuses[i].color
-            }
-
-            return ''
-        }
-    },
-    methods: {
-        isTyping(e) {
-            if (this.tab != 'userlist') {
-                if (this.target < 1 && this.channel && this.tab != '') {
-                    this.channel.whisper('typing', {
-                        username: e.username
+                return 0
+            },
+            statusColor () {
+                if (this.statuses.length > 0) {
+                    let i = _.findIndex(this.statuses, (o) => {
+                        return o.id === this.status
                     })
+
+                    return this.statuses[i].color
                 }
+
+                return ''
             }
         },
-        changeAudible(typeVal, targetVal, newVal) {
-            if (typeVal == 'room') {
-                let currentRoom = _.find(this.audibles, (o) => {
-                    if (o.room && o.room.id && o.room.id == targetVal) {
-                        return o.room.id;
+        methods: {
+            isTyping(e) {
+                if (this.tab != 'userlist') {
+                    if (this.target < 1 && this.channel && this.tab != '') {
+                        this.channel.whisper('typing', {
+                            username: e.username
+                        })
                     }
-                });
-                if (currentRoom) {
-                    let i = currentRoom.room.id;
-                    this.toggleAudible('room', i, newVal);
                 }
-            } else if (typeVal == 'target') {
-                let currentTarget = _.find(this.audibles, (o) => {
-                    if (o.target && o.target.id && o.target.id == targetVal) {
-                        return o.target.id;
+            },
+            changeAudible(typeVal, targetVal, newVal) {
+                if (typeVal == 'room') {
+                    let currentRoom = _.find(this.audibles, (o) => {
+                        if (o.room && o.room.id && o.room.id == targetVal) {
+                            return o.room.id;
+                        }
+                    });
+                    if (currentRoom) {
+                        let i = currentRoom.room.id;
+                        this.toggleAudible('room', i, newVal);
                     }
-                });
-                if (currentTarget) {
-                    let i = currentTarget.target.id;
-                    this.toggleAudible('target', i, newVal);
-                }
-            } else if (typeVal == 'bot') {
-                let currentBot = _.find(this.audibles, (o) => {
-                    if (o.bot && o.bot.id && o.bot.id == targetVal) {
-                        return o.bot.id;
+                } else if (typeVal == 'target') {
+                    let currentTarget = _.find(this.audibles, (o) => {
+                        if (o.target && o.target.id && o.target.id == targetVal) {
+                            return o.target.id;
+                        }
+                    });
+                    if (currentTarget) {
+                        let i = currentTarget.target.id;
+                        this.toggleAudible('target', i, newVal);
                     }
-                });
-                if (currentBot) {
-                    let i = currentBot.bot.id;
-                    this.toggleAudible('bot', i, newVal);
-                }
-            }
-        },
-        changeTab(typeVal, newVal) {
-            if (typeVal == 'room') {
-                this.bot = 0;
-                this.target = 0;
-                this.bot_id = 0;
-                this.receiver_id = 0;
-                this.tab = newVal;
-                this.activeTab = 'room'+newVal;
-                this.activeRoom = newVal;
-                this.deletePing('room',newVal);
-                let currentRoom = _.find(this.echoes, (o) => {
-                    if (o.room && o.room.id && o.room.id == newVal) {
-                        return o.room.id;
+                } else if (typeVal == 'bot') {
+                    let currentBot = _.find(this.audibles, (o) => {
+                        if (o.bot && o.bot.id && o.bot.id == targetVal) {
+                            return o.bot.id;
+                        }
+                    });
+                    if (currentBot) {
+                        let i = currentBot.bot.id;
+                        this.toggleAudible('bot', i, newVal);
                     }
-                });
-                if (currentRoom) {
-                    let i = currentRoom.room.id;
-                    this.changeRoom(i);
-                    this.receiver_id = null;
-                    this.bot_id = null;
                 }
-
-                let currentAudio = _.find(this.audibles, (o) => {
-                    if (o.room && o.room.id && o.room.id == newVal) {
-                        return o.id;
+            },
+            changeTab(typeVal, newVal) {
+                if (typeVal == 'room') {
+                    this.bot = 0;
+                    this.target = 0;
+                    this.bot_id = 0;
+                    this.receiver_id = 0;
+                    this.tab = newVal;
+                    this.activeTab = 'room'+newVal;
+                    this.activeRoom = newVal;
+                    this.deletePing('room',newVal);
+                    let currentRoom = _.find(this.echoes, (o) => {
+                        if (o.room && o.room.id && o.room.id == newVal) {
+                            return o.room.id;
+                        }
+                    });
+                    if (currentRoom) {
+                        let i = currentRoom.room.id;
+                        this.changeRoom(i);
+                        this.receiver_id = null;
+                        this.bot_id = null;
                     }
-                });
-                if (!currentAudio) {
-                } else {
-                    if (currentAudio.status == 1) {
-                        this.listening = 1;
+
+                    let currentAudio = _.find(this.audibles, (o) => {
+                        if (o.room && o.room.id && o.room.id == newVal) {
+                            return o.id;
+                        }
+                    });
+                    if (!currentAudio) {
                     } else {
-                        this.listening = 0;
+                        if (currentAudio.status == 1) {
+                            this.listening = 1;
+                        } else {
+                            this.listening = 0;
+                        }
                     }
-                }
-            } else if (typeVal == 'target') {
-                this.bot = 0;
-                this.tab = newVal;
-                this.activeTab = 'target'+newVal;
-                this.activeTarget = newVal;
-                this.deletePing('target',newVal);
-                let currentTarget = _.find(this.echoes, (o) => {
-                    if (o.target && o.target.username && o.target.id == newVal) {
-                        return o.target.id;
+                } else if (typeVal == 'target') {
+                    this.bot = 0;
+                    this.tab = newVal;
+                    this.activeTab = 'target'+newVal;
+                    this.activeTarget = newVal;
+                    this.deletePing('target',newVal);
+                    let currentTarget = _.find(this.echoes, (o) => {
+                        if (o.target && o.target.username && o.target.id == newVal) {
+                            return o.target.id;
+                        }
+                    });
+                    if (currentTarget) {
+                        let i = currentTarget.target.id;
+                        this.changeTarget(i);
+                        this.receiver_id = i;
+                        this.bot_id = null;
                     }
-                });
-                if (currentTarget) {
-                    let i = currentTarget.target.id;
-                    this.changeTarget(i);
-                    this.receiver_id = i;
-                    this.bot_id = null;
-                }
 
-                let currentAudio = _.find(this.audibles, (o) => {
-                    if (o.target && o.target.username && o.target.id == newVal) {
-                        return o.id;
-                    }
-                });
-                if (!currentAudio) {
-                } else {
-                    if (currentAudio.status == 1) {
-                        this.listening = 1;
+                    let currentAudio = _.find(this.audibles, (o) => {
+                        if (o.target && o.target.username && o.target.id == newVal) {
+                            return o.id;
+                        }
+                    });
+                    if (!currentAudio) {
                     } else {
-                        this.listening = 0;
+                        if (currentAudio.status == 1) {
+                            this.listening = 1;
+                        } else {
+                            this.listening = 0;
+                        }
                     }
-                }
-            } else if (typeVal == 'bot') {
-                this.target = 0;
-                this.tab = newVal;
-                this.activeTab = 'bot'+newVal;
-                this.activeBot = newVal;
-                this.deletePing('bot',newVal);
-                let currentBot = _.find(this.echoes, (o) => {
-                    if (o.bot && o.bot.name && o.bot.id == newVal) {
-                        return o.bot.id;
+                } else if (typeVal == 'bot') {
+                    this.target = 0;
+                    this.tab = newVal;
+                    this.activeTab = 'bot'+newVal;
+                    this.activeBot = newVal;
+                    this.deletePing('bot',newVal);
+                    let currentBot = _.find(this.echoes, (o) => {
+                        if (o.bot && o.bot.name && o.bot.id == newVal) {
+                            return o.bot.id;
+                        }
+                    });
+                    if (currentBot) {
+                        let i = currentBot.bot.id;
+                        this.botName = currentBot.bot.name;
+                        this.botCommand = currentBot.bot.command;
+                        this.botId = currentBot.bot.id;
+                        this.changeBot(i);
+                        this.receiver_id = 1;
+                        this.bot_id = i;
                     }
-                });
-                if (currentBot) {
-                    let i = currentBot.bot.id;
-                    this.botName = currentBot.bot.name;
-                    this.botCommand = currentBot.bot.command;
-                    this.botId = currentBot.bot.id;
-                    this.changeBot(i);
-                    this.receiver_id = 1;
-                    this.bot_id = i;
-                }
 
-                let currentAudio = _.find(this.audibles, (o) => {
-                    if (o.bot && o.bot.name && o.bot.id == newVal) {
-                        return o.id;
-                    }
-                });
-                if (!currentAudio) {
-                } else {
-                    if (currentAudio.status == 1) {
-                        this.listening = 1;
+                    let currentAudio = _.find(this.audibles, (o) => {
+                        if (o.bot && o.bot.name && o.bot.id == newVal) {
+                            return o.id;
+                        }
+                    });
+                    if (!currentAudio) {
                     } else {
-                        this.listening = 0;
+                        if (currentAudio.status == 1) {
+                            this.listening = 1;
+                        } else {
+                            this.listening = 0;
+                        }
                     }
+                } else if (typeVal == 'list') {
+                    this.tab = newVal;
+                    this.scrollToBottom();
                 }
-            } else if (typeVal == 'list') {
-                this.tab = newVal;
-                this.scrollToBottom();
-            }
-        },
-        fetchAudibles() {
-            axios.get('/api/chat/audibles').then(response => {
-                this.audibles = response.data.data
-                let currentAudio = _.find(this.audibles, (o) => {
-                    if (o.room && o.room.id && o.room.id == 1) {
-                        return o.id;
-                    }
-                });
-                if (!currentAudio) {
-                } else {
-                    if (currentAudio.status == 1) {
-                        this.listening = 1;
+            },
+            fetchAudibles() {
+                axios.get('/api/chat/audibles').then(response => {
+                    this.audibles = response.data.data
+                    let currentAudio = _.find(this.audibles, (o) => {
+                        if (o.room && o.room.id && o.room.id == 1) {
+                            return o.id;
+                        }
+                    });
+                    if (!currentAudio) {
                     } else {
-                        this.listening = 0;
+                        if (currentAudio.status == 1) {
+                            this.listening = 1;
+                        } else {
+                            this.listening = 0;
+                        }
                     }
-                }
-                this.fetchConfiguration();
-            })
-        },
-        fetchEchoes() {
-            axios.get('/api/chat/echoes').then(response => {
-                this.echoes = response.data.data
-            })
-        },
-        fetchBots() {
-            axios.get('/api/chat/bots').then(response => {
-                this.bots = response.data.data;
-                this.helpId = this.bots[0].id;
-                this.helpName = this.bots[0].name;
-                this.helpCommand = this.bots[0].command;
-            })
-        },
-        fetchRooms() {
-            axios.get('/api/chat/rooms').then(response => {
-                this.chatrooms = response.data.data;
-                this.room = this.chatrooms[0].id;
-                this.tab = this.chatrooms[0].name;
-                this.activeTab = 'room'+this.room;
-                this.fetchConfiguration();
-            })
-        },
-        fetchConfiguration() {
-            axios.get(`/api/chat/config`).then(response => {
-                this.config = response.data
-            })
-        },
-        fetchBotMessages(id) {
-            axios.get(`/api/chat/bot/${id}`).then(response => {
-                this.messages = _.reverse(response.data.data);
-                this.scrollToBottom(true)
-                this.state.connecting = false
-            })
-        },
-        fetchPrivateMessages() {
-            axios.get(`/api/chat/private/messages/${this.target}`).then(response => {
-                this.messages = _.reverse(response.data.data)
-                this.scrollToBottom(true)
-                this.state.connecting = false
-            })
-        },
-        fetchMessages() {
-            axios.get(`/api/chat/messages/${this.room}`).then(response => {
-                this.messages = _.reverse(response.data.data);
-                this.scrollToBottom(true)
-                this.state.connecting = false
-            })
-        },
-        fetchStatuses() {
-            axios.get('/api/chat/statuses').then(response => {
-                this.statuses = response.data
-            })
-        },
-        forceMessage(name) {
-            $('#chat-message').bbcode('/msg ' + name + ' ');
-            $('#chat-message').htmlcode('/msg ' + name + ' ');
-        },
-        forceGift(name) {
-            $('#chat-message').bbcode('/gift ' + name + ' ');
-            $('#chat-message').htmlcode('/gift ' + name + ' ');
-        },
-        freezeChat() {
-            this.frozen = true;
-        },
-        unfreezeChat() {
-            this.frozen = false;
-        },
-        leaveBot(id) {
-            if (id > 0) {
-                this.bot = 0;
-                this.botName = '';
-                this.botId = '';
-                /* Update the users bot in the database */
-                axios.post(`/api/chat/echoes/${this.auth.id}/delete/bot`, {
-                    'bot_id': id
-                }).then(response => {
-                    // reassign the auth variable to the response data
-                    this.auth = response.data
-                    $('#currentChatroom').val('1');
-                    this.fetchRooms();
+                    this.fetchConfiguration();
                 })
-            }
-        },
-        toggleAudible(type, id, nv) {
-            if (id != 0) {
-                if (type == 'room') {
-                    axios.post(`/api/chat/audibles/${this.auth.id}/toggle/chatroom`, {
-                        'room_id': id,
-                        'nv': nv,
+            },
+            fetchEchoes() {
+                axios.get('/api/chat/echoes').then(response => {
+                    this.echoes = response.data.data;
+                    this.echoes = this.sortEchoes(this.echoes);
+                    console.log(this.echoes);
+                    this.boot = 1;
+                })
+            },
+            fetchBots() {
+                axios.get('/api/chat/bots').then(response => {
+                    this.bots = response.data.data;
+                    this.helpId = this.bots[0].id;
+                    this.helpName = this.bots[0].name;
+                    this.helpCommand = this.bots[0].command;
+                })
+            },
+            fetchRooms() {
+                axios.get('/api/chat/rooms').then(response => {
+                    this.chatrooms = response.data.data;
+                    this.room = this.chatrooms[0].id;
+                    this.tab = this.chatrooms[0].name;
+                    this.activeTab = 'room'+this.room;
+                    this.fetchConfiguration();
+                })
+            },
+            fetchConfiguration() {
+                axios.get(`/api/chat/config`).then(response => {
+                    this.config = response.data
+                })
+            },
+            fetchBotMessages(id) {
+                axios.get(`/api/chat/bot/${id}`).then(response => {
+                    this.messages = _.reverse(response.data.data);
+                    this.scrollToBottom(true)
+                    this.state.connecting = false
+                })
+            },
+            fetchPrivateMessages() {
+                axios.get(`/api/chat/private/messages/${this.target}`).then(response => {
+                    this.messages = _.reverse(response.data.data)
+                    this.scrollToBottom(true)
+                    this.state.connecting = false
+                })
+            },
+            fetchMessages() {
+                axios.get(`/api/chat/messages/${this.room}`).then(response => {
+                    this.messages = _.reverse(response.data.data);
+                    this.scrollToBottom(true)
+                    this.state.connecting = false
+                })
+            },
+            fetchStatuses() {
+                axios.get('/api/chat/statuses').then(response => {
+                    this.statuses = response.data
+                })
+            },
+            forceMessage(name) {
+                $('#chat-message').bbcode('/msg ' + name + ' ');
+                $('#chat-message').htmlcode('/msg ' + name + ' ');
+            },
+            forceGift(name) {
+                $('#chat-message').bbcode('/gift ' + name + ' ');
+                $('#chat-message').htmlcode('/gift ' + name + ' ');
+            },
+            freezeChat() {
+                this.frozen = true;
+            },
+            unfreezeChat() {
+                this.frozen = false;
+                this.scrollToBottom(true);
+            },
+            leaveBot(id) {
+                if (id > 0) {
+                    this.bot = 0;
+                    this.botName = '';
+                    this.botId = '';
+                    /* Update the users bot in the database */
+                    axios.post(`/api/chat/echoes/${this.auth.id}/delete/bot`, {
+                        'bot_id': id
                     }).then(response => {
                         // reassign the auth variable to the response data
-                        this.auth = response.data;
-                        this.listening = nv;
+                        this.auth = response.data
+                        $('#currentChatroom').val('1');
+                        this.fetchRooms();
                     })
-                } else if (type == 'target') {
-                    axios.post(`/api/chat/audibles/${this.auth.id}/toggle/target`, {
-                        'target_id': id,
-                        'nv': nv,
+                }
+            },
+            toggleAudible(type, id, nv) {
+                if (id != 0) {
+                    if (type == 'room') {
+                        axios.post(`/api/chat/audibles/${this.auth.id}/toggle/chatroom`, {
+                            'room_id': id,
+                            'nv': nv,
+                        }).then(response => {
+                            // reassign the auth variable to the response data
+                            this.auth = response.data;
+                            this.listening = nv;
+                        })
+                    } else if (type == 'target') {
+                        axios.post(`/api/chat/audibles/${this.auth.id}/toggle/target`, {
+                            'target_id': id,
+                            'nv': nv,
+                        }).then(response => {
+                            // reassign the auth variable to the response data
+                            this.auth = response.data;
+                            this.listening = nv;
+                        })
+                    } else if (type == 'bot') {
+                        axios.post(`/api/chat/audibles/${this.auth.id}/toggle/bot`, {
+                            'bot_id': id,
+                            'nv': nv,
+                        }).then(response => {
+                            // reassign the auth variable to the response data
+                            this.auth = response.data;
+                            this.listening = nv;
+                        })
+                    }
+                }
+            },
+            leaveRoom(id) {
+                if (id != 1) {
+                    /* Update the users chatroom in the database */
+                    axios.post(`/api/chat/echoes/${this.auth.id}/delete/chatroom`, {
+                        'room_id': id
                     }).then(response => {
                         // reassign the auth variable to the response data
-                        this.auth = response.data;
-                        this.listening = nv;
+                        this.auth = response.data
+                        $('#currentChatroom').val('1');
+                        this.fetchRooms();
                     })
-                } else if (type == 'bot') {
-                    axios.post(`/api/chat/audibles/${this.auth.id}/toggle/bot`, {
-                        'bot_id': id,
-                        'nv': nv,
+                }
+            },
+            leaveTarget(id) {
+                if (id != 1) {
+                    this.target = 0;
+                    /* Update the users chatroom in the database */
+                    axios.post(`/api/chat/echoes/${this.auth.id}/delete/target`, {
+                        'target_id': id
                     }).then(response => {
                         // reassign the auth variable to the response data
                         this.auth = response.data;
-                        this.listening = nv;
+                        $('#currentChatroom').val('1');
+                        this.fetchRooms();
                     })
                 }
-            }
-        },
-        leaveRoom(id) {
-            if (id != 1) {
-                /* Update the users chatroom in the database */
-                axios.post(`/api/chat/echoes/${this.auth.id}/delete/chatroom`, {
-                    'room_id': id
-                }).then(response => {
-                    // reassign the auth variable to the response data
-                    this.auth = response.data
-                    $('#currentChatroom').val('1');
-                    this.fetchRooms();
-                })
-            }
-        },
-        leaveTarget(id) {
-            if (id != 1) {
+            },
+            changeFullscreen() {
+              if(this.fullscreen == 1) {
+                  this.fullscreen = 0;
+                  $('#frameBody').css({ 'height': '92vh', 'min-height': '300px', 'max-height': '590px' });
+                  $('#frameList').css({ 'height': 'initial', 'min-height': '300px', 'max-height': '535px' });
+                  $('#frameHeader').css({ 'height': 'initial', 'min-height': 'initial', 'max-height': 'initial' });
+                  $('#frameFooter').css({ 'padding-top': '10px', 'height': 'initial', 'min-height': 'initial', 'max-height': 'initial' });
+                  $('#frameWrap').css({ 'width': '100%', 'padding-top': '0px' });
+              } else {
+                  this.fullscreen = 1;
+                  $('#frameBody').css({ 'height': '70vh', 'min-height': '0px', 'max-height': '70vh' });
+                  $('#frameList').css({ 'height': $('#frameBody').height()-$('#frameTabs').height()-20+'px' });
+                  $('#frameHeader').css({ 'height': '6vh', 'min-height': '0px', 'max-height': '6vh' });
+                  $('#frameFooter').css({ 'padding-top': '0px', 'height': '24vh', 'min-height': '0px', 'max-height': '24vh' });
+                  $('#frameWrap').css({ 'width': '100%', 'padding-top': '5px' });
+              }
+            },
+            changeRoom(id) {
+                this.bot = 0;
                 this.target = 0;
-                /* Update the users chatroom in the database */
-                axios.post(`/api/chat/echoes/${this.auth.id}/delete/target`, {
-                    'target_id': id
-                }).then(response => {
-                    // reassign the auth variable to the response data
-                    this.auth = response.data;
-                    $('#currentChatroom').val('1');
-                    this.fetchRooms();
-                })
-            }
-        },
-        changeRoom(id) {
-            this.bot = 0;
-            this.target = 0;
-            this.room = id;
-            this.bot_id = null;
-            this.receiver_id = null;
-            if (this.auth.chatroom.id !== id) {
                 this.room = id;
-                /* Update the users chatroom in the database */
-                axios.post(`/api/chat/user/${this.auth.id}/chatroom`, {
-                    'room_id': id
-                }).then(response => {
-                    // reassign the auth variable to the response data
-                    this.auth = response.data
+                this.bot_id = null;
+                this.receiver_id = null;
+                if (this.auth.chatroom.id !== id) {
+                    this.room = id;
+                    /* Update the users chatroom in the database */
+                    axios.post(`/api/chat/user/${this.auth.id}/chatroom`, {
+                        'room_id': id
+                    }).then(response => {
+                        // reassign the auth variable to the response data
+                        this.auth = response.data
+                        this.tab = this.auth.chatroom.name;
+                        this.activeRoom = this.auth.chatroom.name;
+                        this.fetchMessages()
+                    })
+                } else {
                     this.tab = this.auth.chatroom.name;
                     this.activeRoom = this.auth.chatroom.name;
                     this.fetchMessages()
-                })
-            } else {
-                this.tab = this.auth.chatroom.name;
-                this.activeRoom = this.auth.chatroom.name;
-                this.fetchMessages()
-            }
-        },
-        changeStatus(status_id) {
-            this.status = status_id
-            this.showStatuses = false
-            if (this.auth.chat_status.id !== status_id) {
-                /* Update the users chat status in the database */
-                axios.post(`/api/chat/user/${this.auth.id}/status`, {
-                    'status_id': status_id
-                }).then(response => {
-                    // reassign the auth variable to the response data
-                    this.auth = response.data
-                })
-            }
-        },
-        changeTarget(id) {
-            if (this.target !== id && id != 0) {
-                this.target = id;
-                this.fetchPrivateMessages()
-            } else {
-                this.scrollToBottom(true)
-            }
-        },
-        changeBot(id) {
-            if (this.bot !== id && id != 0) {
-                this.bot = id;
-                this.bot_id = id;
-                this.receiver_id = 1;
-                this.fetchBotMessages(this.bot)
-            } else {
-                this.scrollToBottom(true)
-            }
-        },
-        startBot() {
-            if (this.bot != 9999) {
-                this.tab = '@' + this.helpName;
-                this.bot = this.helpId;
-                this.bot_id = this.helpId;
-                this.receiver_id = 1;
+                }
+            },
+            changeStatus(status_id) {
+                this.status = status_id
+                this.showStatuses = false
+                if (this.auth.chat_status.id !== status_id) {
+                    /* Update the users chat status in the database */
+                    axios.post(`/api/chat/user/${this.auth.id}/status`, {
+                        'status_id': status_id
+                    }).then(response => {
+                        // reassign the auth variable to the response data
+                        this.auth = response.data
+                    })
+                }
+            },
+            changeTarget(id) {
+                if (this.target !== id && id != 0) {
+                    this.target = id;
+                    this.fetchPrivateMessages()
+                } else {
+                    this.scrollToBottom(true)
+                }
+            },
+            changeBot(id) {
+                if (this.bot !== id && id != 0) {
+                    this.bot = id;
+                    this.bot_id = id;
+                    this.receiver_id = 1;
+                    this.fetchBotMessages(this.bot)
+                } else {
+                    this.scrollToBottom(true)
+                }
+            },
+            sortEchoes(obj) {
+                let output = obj.sort(function(a, b) {
+                    var nv1 = '';
+                    if(a.type == 'room') { nv1=a.name; }
+                    if(a.type == 'target') { nv1=a.username; }
+                    if(a.type == 'bot') { nv1=a.name; }
+                    var nv2 = '';
+                    if(b.type == 'room') { nv1=b.name; }
+                    if(b.type == 'target') { nv1=b.username; }
+                    if(b.type == 'bot') { nv1=b.name; }
+                    return nv1 - nv2;
+                });
+                return output;
+            },
+            startBot() {
+                if (this.bot != 9999) {
+                    this.tab = '@' + this.helpName;
+                    this.bot = this.helpId;
+                    this.bot_id = this.helpId;
+                    this.receiver_id = 1;
 
-                this.botId = this.helpId;
-                this.botName = this.helpName;
-                this.botCommand = this.helpCommand;
+                    this.botId = this.helpId;
+                    this.botName = this.helpName;
+                    this.botCommand = this.helpCommand;
 
-                this.fetchBotMessages(this.bot);
-            } else {
-                this.scrollToBottom(true)
-            }
-        },
-        playSound() {
-            if(window.sounds && window.sounds.hasOwnProperty('alert.mp3')) {
-                window.sounds['alert.mp3'].pause;
-                window.sounds['alert.mp3'].position = 0;
-                window.sounds['alert.mp3'].play();
-            }
-        },
-        handleSound(type,id) {
-            let audioState = $('#chatbody').attr('audio');
-            if (type == 'room') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].room != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].room.id) == parseInt(id)) {
-                        if(this.activeTab == 'room'+id && audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'room'+id) {
-                            this.playSound();
+                    this.fetchBotMessages(this.bot);
+                } else {
+                    this.scrollToBottom(true)
+                }
+            },
+            playSound() {
+                if(window.sounds && window.sounds.hasOwnProperty('alert.mp3')) {
+                    window.sounds['alert.mp3'].pause;
+                    window.sounds['alert.mp3'].position = 0;
+                    window.sounds['alert.mp3'].play();
+                }
+            },
+            handleSound(type,id) {
+                let audioState = $('#chatbody').attr('audio');
+                if (type == 'room') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].room != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].room.id) == parseInt(id)) {
+                            if(this.activeTab == 'room'+id && audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'room'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-            if (type == 'target') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].target != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].target.id) == parseInt(id)) {
-                        if(this.activeTab == 'target'+id && audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'target'+id) {
-                            this.playSound();
+                if (type == 'target') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].target != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].target.id) == parseInt(id)) {
+                            if(this.activeTab == 'target'+id && audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'target'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-            if (type == 'bot') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].bot != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].bot.id) == parseInt(id)) {
-                        if(this.activeTab == 'bot'+id && audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'bot'+id) {
-                            this.playSound();
+                if (type == 'bot') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].bot != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].bot.id) == parseInt(id)) {
+                            if(this.activeTab == 'bot'+id && audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'bot'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-        },
-        handleMessage(type, id, message) {
-            let audioState = $('#chatbody').attr('audio');
-            if (type == 'room') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].room != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].room.id) == parseInt(id)) {
-                        if(audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'room'+id) {
-                            this.playSound();
+            },
+            handleMessage(type, id, message) {
+                let audioState = $('#chatbody').attr('audio');
+                if (type == 'room') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].room != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].room.id) == parseInt(id)) {
+                            if(audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'room'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-            if (type == 'target') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].target != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].target.id) == parseInt(id)) {
-                        if(audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'target'+id) {
-                            this.playSound();
+                if (type == 'target') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].target != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].target.id) == parseInt(id)) {
+                            if(audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'target'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-            if (type == 'bot') {
-                for(var i = 0; i<this.audibles.length; i++) {
-                    if (this.audibles[i].bot != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].bot.id) == parseInt(id)) {
-                        if(audioState == 'true') {
-                            this.playSound();
-                        } else if(this.activeTab != 'bot'+id) {
-                            this.playSound();
+                if (type == 'bot') {
+                    for(var i = 0; i<this.audibles.length; i++) {
+                        if (this.audibles[i].bot != null && parseInt(this.audibles[i].status) == 1 && parseInt(this.audibles[i].bot.id) == parseInt(id)) {
+                            if(audioState == 'true') {
+                                this.playSound();
+                            } else if(this.activeTab != 'bot'+id) {
+                                this.playSound();
+                            }
                         }
                     }
                 }
-            }
-        },
-        handlePing(type, id) {
-            if (type == 'room') {
-                let currentRoom = _.find(this.pings, (o) => {
-                    if (o.type == 'room' && o.id == this.check) {
-                        return o.id;
-                    }
-                });
-                if (!currentRoom) {
-                    if(this.bot > 0 || this.target > 0 || this.auth.chatroom.id != id) {
-                        let addon = [];
-                        addon['type'] = 'room';
-                        addon['id'] = id;
-                        addon['count'] = 0;
-                        this.pings.push(addon);
+            },
+            handlePing(type, id) {
+                if (type == 'room') {
+                    var match = false;
+                    for(var i = 0; i<this.pings.length; i++) {
+                        if (this.pings[i].hasOwnProperty('type') && this.pings[i].type == 'room' && this.pings[i].id == id) {
+                            match = true;
+                        }
                     }
                 }
-                this.handleSound('room',id);
-            }
-            else if (type == 'target') {
-                let currentTarget = _.find(this.pings, (o) => {
-                    if (o.type == 'target' && o.id == id) {
-                        return o.id;
+                if (type == 'target') {
+                    var match = false;
+                    for(var i = 0; i<this.pings.length; i++) {
+                        if (this.pings[i].hasOwnProperty('type') && this.pings[i].type == 'target' && this.pings[i].id == id) {
+                            match = true;
+                        }
                     }
-                });
-                if (!currentTarget) {
-                    if(this.target < 0 || this.target != id) {
+                    if(match != true) {
                         let addon = [];
                         addon['type'] = 'target';
                         addon['id'] = id;
                         addon['count'] = 0;
                         this.pings.push(addon);
                     }
+                    this.handleSound('target',id);
                 }
-                this.handleSound('target',id);
-            }
-            else if (type == 'bot') {
-                let currentBot= _.find(this.pings, (o) => {
-                    if (o.type == 'bot' && o.id == id) {
-                        return o.id;
+                if (type == 'bot') {
+                    var match = false;
+                    for(var i = 0; i<this.pings.length; i++) {
+                        if (this.pings[i].hasOwnProperty('type') && this.pings[i].type == 'bot' && this.pings[i].id == id) {
+                            match = true;
+                        }
                     }
-                });
-                if (!currentBot) {
-                    if(this.bot < 0 || this.bot != id) {
+                    if(match != true) {
                         let addon = [];
-                        addon['type'] = 'target';
+                        addon['type'] = 'bot';
                         addon['id'] = id;
                         addon['count'] = 0;
                         this.pings.push(addon);
                     }
+                    this.handleSound('bot',id);
                 }
-                this.handleSound('bot',id);
-            }
-        },
-        deletePing(type, id) {
-            for(var i = 0; i<this.pings.length; i++) {
-                if(this.pings[i].type == type && this.pings[i].id == id) {
-                    this.pings.splice(i,1);
+            },
+            deletePing(type, id) {
+                for(var i = 0; i<this.pings.length; i++) {
+                    if(this.pings[i].type == type && this.pings[i].id == id) {
+                        this.pings.splice(i,1);
+                    }
                 }
-            }
-            return false;
-        },
-        checkPings(type, id) {
-            if(type =='room') {
-                let currentRoom = _.find(this.pings, (o) => {
-                    if (o.type == 'room' && o.id == id) {
-                        return o.id;
+                return false;
+            },
+            checkPings(type, id) {
+                if(type =='room') {
+                    let currentRoom = _.find(this.pings, (o) => {
+                        if (o.type == 'room' && o.id == id) {
+                            return o.id;
+                        }
+                    });
+                    if (currentRoom) {
+                        return true;
                     }
-                });
-                if (currentRoom) {
-                    return true;
                 }
-            }
-            else if(type =='target') {
-                let currentTarget = _.find(this.pings, (o) => {
-                    if (o.type == 'target' && o.id == id) {
-                        return o.id;
+                else if(type =='target') {
+                    let currentTarget = _.find(this.pings, (o) => {
+                        if (o.type == 'target' && o.id == id) {
+                            return o.id;
+                        }
+                    });
+                    if (currentTarget) {
+                        return true;
                     }
-                });
-                if (currentTarget) {
-                    return true;
                 }
-            }
-            else if(type =='bot') {
-                let currentBot = _.find(this.pings, (o) => {
-                    if (o.type == 'bot' && o.id == id) {
-                        return o.id;
+                else if(type =='bot') {
+                    let currentBot = _.find(this.pings, (o) => {
+                        if (o.type == 'bot' && o.id == id) {
+                            return o.id;
+                        }
+                    });
+                    if (currentBot) {
+                        return true;
                     }
-                });
-                if (currentBot) {
-                    return true;
                 }
-            }
-            return false;
-        },
-        /* User defaults to System user */
-        createMessage (message, save = true, user_id = 1, receiver_id = null, bot_id = null) {
-            axios.post('/api/chat/messages', {
-                'user_id': user_id,
-                'receiver_id': receiver_id,
-                'bot_id': bot_id,
-                'chatroom_id': this.room,
-                'message': message,
-                'save': save,
-                'targeted': this.target,
-            }).then(response => {
-                this.scrollToBottom(true)
-                if (this.messages.length > this.config.message_limit) {
-                    _.each(this.messages, (m, i) => {
-                        if (this.target > 0) {
-                            if (m.receiver && m.receiver > 0) {
-                                this.messages.splice(i, 1)
-                                return false
+                return false;
+            },
+            /* User defaults to System user */
+            createMessage (message, save = true, user_id = 1, receiver_id = null, bot_id = null) {
+                if(this.tab == 'userlist') return;
+                axios.post('/api/chat/messages', {
+                    'user_id': user_id,
+                    'receiver_id': receiver_id,
+                    'bot_id': bot_id,
+                    'chatroom_id': this.room,
+                    'message': message,
+                    'save': save,
+                    'targeted': this.target,
+                }).then(response => {
+                    if(this.activeTab.substring(0,3) == 'bot' || this.activeTab.substring(0,6) == 'target') {
+                        this.messages.push(response.data.data);
+                    }
+                    if (this.messages.length > this.config.message_limit) {
+                        _.each(this.messages, (m, i) => {
+                            if (this.target > 0) {
+                                if (m.receiver && m.receiver > 0) {
+                                    this.messages.splice(i, 1)
+                                    return false
+                                }
                             }
-                        }
-                        else {
-                            if (!m.receiver || m.receiver == 0) {
-                                this.messages.splice(i, 1)
-                                return false
+                            else {
+                                if (!m.receiver || m.receiver == 0) {
+                                    this.messages.splice(i, 1)
+                                    return false
+                                }
                             }
-                        }
-                    })
-                }
-            })
-        },
-        scrollToBottom (force = false) {
+                        })
+                    }
+                    this.scrollToBottom(true);
+                })
+            },
+            scrollToBottom (force = false) {
 
-            if (this.frozen) return;
+                if (!force && this.frozen) return;
 
-            let container = $('.messages .list-group')
-            if (this.scroll || force) {
-                container.animate({scrollTop: container.prop('scrollHeight')}, 0)
-            }
-            container.scroll(() => {
-                this.scroll = false;
-                let scrollTop = container.scrollTop() + container.prop('clientHeight')
-                let scrollHeight = container.prop('scrollHeight')
-                this.scroll = scrollTop >= scrollHeight - 50
-            })
-        },
-        listenForChatter() {
-            this.chatter = window.Echo.private(`chatter.${this.auth.id}`);
-            this.chatter.listen('Chatter', (e) => {
+                let container = $('.messages .list-group')
+                if (this.scroll || force) {
+                    container.animate({scrollTop: container.prop('scrollHeight')}, 0)
+                }
+                container.scroll(() => {
+                    this.scroll = false;
+                    let scrollTop = container.scrollTop() + container.prop('clientHeight')
+                    let scrollHeight = container.prop('scrollHeight')
+                    this.scroll = scrollTop >= scrollHeight - 50
+                })
+            },
+            listenForChatter() {
+                this.chatter = window.Echo.private(`chatter.${this.auth.id}`);
+                this.chatter.listen('Chatter', (e) => {
                     if(e.type == 'echo') {
-                        this.echoes = e.echoes;
+                        this.echoes = this.sortEchoes(e.echoes);
                     } else if(e.type == 'audible') {
                         this.audibles = e.audibles;
                     } else if(e.type == 'new.message') {
-                        if(this.target < 1 && this.bot < 1) return false;
+                        if(this.activeTab.substring(0,3) != 'bot' && this.activeTab.substring(0,6) != 'target') return false;
+                        if(e.message.bot && e.message.bot != null && e.message.bot.id != this.bot) return false;
+                        if(e.message.target && e.message.target != null && e.message.target.id != this.target) return false;
                         this.messages.push(e.message);
+                        console.log(e);
                         if(this.bot && this.bot > 0) {
                             this.handleMessage('bot', this.bot, e.message);
                         }
@@ -870,73 +920,74 @@
                         }, 15000)
                     }
                 })
-        },
-        listenForEvents () {
-            this.channel
-                .here(users => {
-                    this.state.connecting = false
-                    this.users = users
-                    setInterval(() => {
-                        this.scrollToBottom()
-                    }, 100)
-                })
-                .joining(user => {
-                    // this.createMessage(`${user.username} has JOINED the chat ...`)
-                })
-                .leaving(user => {
-                    // this.createMessage(`${user.username} has LEFT the chat ...`)
-                })
-                .listen('.new.message', e => {
-                    if(this.target > 0 || this.bot > 0) return false;
-                    this.messages.push(e.message)
-                    this.handleMessage('room',this.room, e.message);
-                })
-                .listen('.new.ping', e => {
-                    this.handlePing('room',e.ping.id);
-                })
-                .listen('.edit.message', e => {
+            },
+            listenForEvents () {
+                this.channel
+                    .here(users => {
+                        this.state.connecting = false
+                        this.users = users
+                        setInterval(() => {
+                            this.scrollToBottom()
+                        }, 100)
+                    })
+                    .joining(user => {
+                        // this.createMessage(`${user.username} has JOINED the chat ...`)
+                    })
+                    .leaving(user => {
+                        // this.createMessage(`${user.username} has LEFT the chat ...`)
+                    })
+                    .listen('.new.message', e => {
+                        if(this.activeTab.substring(0,4) != 'room') return false;
+                        this.messages.push(e.message);
+                        this.handleMessage('room',this.room, e.message);
+                    })
+                    .listen('.new.ping', e => {
+                        this.handlePing('room',e.ping.id);
+                    })
+                    .listen('.edit.message', e => {
 
-                })
-                .listen('.delete.message', e => {
-                    if(this.target > 0 || this.bot > 0) return false;
-                    let msgs = this.messages
-                    let index = msgs.findIndex(msg => msg.id === e.message.id)
-                    this.messages.splice(index, 1)
-                })
-                .listenForWhisper('typing', e => {
-                    if (this.target > 0 || this.bot > 0) return false;
-                    if (this.activePeer === false) {
-                        this.activePeer = e
-                    }
-                    setTimeout(() => {
-                        this.activePeer = false
-                    }, 15000)
-                })
+                    })
+                    .listen('.delete.message', e => {
+                        if(this.target > 0 || this.bot > 0) return false;
+                        let msgs = this.messages
+                        let index = msgs.findIndex(msg => msg.id === e.message.id)
+                        this.messages.splice(index, 1)
+                    })
+                    .listenForWhisper('typing', e => {
+                        if (this.target > 0 || this.bot > 0) return false;
+                        if (this.activePeer === false) {
+                            this.activePeer = e
+                        }
+                        setTimeout(() => {
+                            this.activePeer = false
+                        }, 15000)
+                    })
+            },
+            attachAudible () {
+                $(window).off('blur');
+                $(window).on('blur',function() {
+                    $('#chatbody').attr('audio', true);
+                });
+                $(window).off('focus');
+                $(window).on('focus',function() {
+                    $('#chatbody').attr('audio', false);
+                });
+            }
         },
-        attachAudible () {
-            $(window).off('blur');
-            $(window).on('blur',function() {
-                $('#chatbody').attr('audio', true);
-            });
-            $(window).off('focus');
-            $(window).on('focus',function() {
-                $('#chatbody').attr('audio', false);
-            });
-        }
-    },
-      created () {
-          this.startup = Date.now();
-          this.auth = this.user;
-          this.activeRoom = this.auth.chatroom.name;
-          this.activeTarget = '';
-          this.activeBot = '';
-          this.fetchAudibles();
-          this.fetchEchoes();
-          this.fetchRooms();
-          this.fetchBots();
-          this.fetchStatuses();
-          this.listenForChatter();
-          this.attachAudible();
-      },
-  }
-</script>
+        created () {
+            this.startup = Date.now();
+            this.auth = this.user;
+            this.activeRoom = this.auth.chatroom.name;
+            this.activeTarget = '';
+            this.activeBot = '';
+            this.fetchRooms();
+            this.fetchBots();
+            this.fetchStatuses();
+            this.fetchAudibles();
+            this.fetchEchoes();
+            this.listenForChatter();
+            this.attachAudible();
+            this.scrollToBottom(true);
+        },
+    }
+</script>
\ No newline at end of file

From 4a641a89f3888ef0495615e736a564398d6a17a9 Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:53:06 -0500
Subject: [PATCH 04/14] (Update) ChatForm Vue

Update for compact / fs.
---
 resources/js/components/chat/ChatForm.vue | 213 ++++++++++------------
 1 file changed, 101 insertions(+), 112 deletions(-)

diff --git a/resources/js/components/chat/ChatForm.vue b/resources/js/components/chat/ChatForm.vue
index 121178bbda..d03a6c345a 100644
--- a/resources/js/components/chat/ChatForm.vue
+++ b/resources/js/components/chat/ChatForm.vue
@@ -1,82 +1,71 @@
 <template>
     <div class="message-input">
-        <div class="wrap">
-            <div class="row info">
-
-                <div class="col-md-6">
-                    <div style="padding-left: 0px; margin-left: 0px; padding-bottom: 6px;" v-if="$parent.bot > 0">
-                        <span class="badge-extra" style="margin-left: 0px; padding-left: 0px;">{{ $parent.botName }} can accept messages from any tab if you type: <strong>/{{ $parent.botCommand }} help</strong></span>
-                    </div>
-                    <div class="typing" v-if="$parent.target < 1" style="margin-left: 0px !important; padding-left: 0px !important; padding-bottom: 6px;">
-                        <span class="badge-extra" v-if="$parent.activePeer" style="margin-left: 0px !important;">{{ $parent.activePeer.username }} is typing ...</span>
+        <div class="wrap" id="frameWrap">
+            <div class="width-table" style="margin: auto; padding-bottom: 5px;">
+                <div class="width-25" style="padding-left: 0px; margin-left: 0px;">
+                    <div style="padding-left: 0px; margin-left: 0px; padding-bottom: 0px; margin-bottom: 0px;" v-if="$parent.bot > 0 && $parent.activeTab.substr(0,3) == 'bot'">
+                        <span class="badge-extra" style="margin-left: 0px; padding-left: 0px; margin-bottom: 0px;">{{ $parent.botName }} can accept messages from any tab if you type: <strong>/{{ $parent.botCommand }} help</strong></span>
                     </div>
-
-                    <div style="padding: 3px 0 6px 0;">
-                    <span class="badge-extra">
-                        <strong>SHIFT + ENTER</strong> to insert new line
-                    </span>
-                    <span class="badge-extra">
-                        Type <strong>:</strong> for emoji
-                    </span>
-
-                    <span class="badge-extra">
-                        BBcode Allowed
-                    </span>
+                    <div class="typing" v-if="$parent.target < 1 && $parent.activePeer != ''" style="margin-left: 0px !important; padding-left: 0px !important; padding-bottom: 0px; margin-bottom: 0px;">
+                        <span class="badge-extra" v-if="$parent.activePeer" style="margin-left: 0px !important; padding-left: 0px !important; margin-bottom: 0px;">{{ $parent.activePeer.username }} is typing ...</span>
                     </div>
                 </div>
-                <div class="col-md-3">
-                    <div class="mt-5">
-
-                        <div class="pull-right">
-                            <div style="margin-right: 5px;">
+                <div class="width-75" style="padding: 0px;">
+                        <div v-if="$parent.tab != 'userlist'" style="margin-right: 5px; display: inline-block;">
+                            <span>Audio: </span>
                             <i v-if="$parent.room && $parent.room > 0 && $parent.bot < 1 && $parent.target < 1 && $parent.tab !='userlist'" v-tooltip="`Audibles`"
                                @click.prevent="$parent.changeAudible('room',$parent.room,($parent.listening ? 0 : 1))"
                                :class="$parent.listening ? 'fa fa-bell pointee' : 'fa fa-bell-slash pointee'"
                                :style="`color: ${$parent.listening ? '#006600' : '#CC0000'}`"></i>
 
-                                <i v-if="$parent.bot && $parent.bot >= 1 && $parent.target < 1 && $parent.tab !='userlist'" v-tooltip="`Audibles`"
-                                   @click.prevent="$parent.changeAudible('bot',$parent.bot,($parent.listening ? 0 : 1))"
-                                   :class="$parent.listening ? 'fa fa-bell pointee' : 'fa fa-bell-slash pointee'"
-                                   :style="`color: ${$parent.listening ? '#006600' : '#CC0000'}`"></i>
+                            <i v-if="$parent.bot && $parent.bot >= 1 && $parent.target < 1 && $parent.tab !='userlist'" v-tooltip="`Audibles`"
+                               @click.prevent="$parent.changeAudible('bot',$parent.bot,($parent.listening ? 0 : 1))"
+                               :class="$parent.listening ? 'fa fa-bell pointee' : 'fa fa-bell-slash pointee'"
+                               :style="`color: ${$parent.listening ? '#006600' : '#CC0000'}`"></i>
 
-                                <i v-if="$parent.target && $parent.target >= 1 && $parent.bot < 1 && $parent.tab !='userlist'" v-tooltip="`Audibles`"
-                                   @click.prevent="$parent.changeAudible('target',$parent.target,($parent.listening ? 0 : 1))"
-                                   :class="$parent.listening ? 'fa fa-bell pointee' : 'fa fa-bell-slash pointee'"
-                                   :style="`color: ${$parent.listening ? '#006600' : '#CC0000'}`"></i>
-                            </div>
+                            <i v-if="$parent.target && $parent.target >= 1 && $parent.bot < 1 && $parent.tab !='userlist'" v-tooltip="`Audibles`"
+                               @click.prevent="$parent.changeAudible('target',$parent.target,($parent.listening ? 0 : 1))"
+                               :class="$parent.listening ? 'fa fa-bell pointee' : 'fa fa-bell-slash pointee'"
+                               :style="`color: ${$parent.listening ? '#006600' : '#CC0000'}`"></i>
                         </div>
-                    <div class="pull-right">
+                        <div style="margin-right: 5px; display: inline-block;">
+                        <span style="margin-right: 5px;">Status: </span>
                         <i v-for="status in $parent.statuses"
                            v-tooltip="status.name"
                            @click="$emit('changedStatus', status.id)"
                            :class="status.icon ? status.icon + ' pointee mr-5' : 'fa fa-dot-circle-o pointee mr-5'"
                            :style="`color: ${status.color}`"></i>
-                    </div>
-                    </div>
-                </div>
-                <div class="col-md-3 pr-0" style="padding-bottom: 3px;">
-                    <chatrooms-dropdown :current="user.chatroom.id"
-                                        :chatrooms="$parent.chatrooms"
-                                        v-tooltip="`Chatrooms`"
-                                        class="pull-right"
-                                        @changedRoom="$parent.changeRoom">
-
-                    </chatrooms-dropdown>
+                        <span class="badge-extra">
+                                <strong>SHIFT + ENTER</strong> to insert new line
+                            </span>
+                        <span class="badge-extra" style="margin-right: 5px;">
+                                Type <strong>:</strong> for emoji
+                            </span>
+                        <span>
+                            <chatrooms-dropdown :current="user.chatroom.id"
+                                                :chatrooms="$parent.chatrooms"
+                                                v-tooltip="`Chatrooms`"
+                                                class="pull-right"
+                                                @changedRoom="$parent.changeRoom">
+
+                            </chatrooms-dropdown>
+                        </span>
+                        </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                    <textarea id="chat-message"
-                              name="message"
-                              placeholder="Write your message..."
-                              cols="30"
-                              rows="5" send="true">
-
-                </textarea>
-                </div>
+        </div>
+        <div class="row" style="margin: auto;">
+            <div class="col-md-12">
+                                    <textarea id="chat-message"
+                                              name="message"
+                                              placeholder="Write your message..."
+                                              cols="30"
+                                              rows="5" send="true">
+                                    </textarea>
             </div>
         </div>
     </div>
+    </div>
 </template>
 <style lang="scss" scoped>
     .col-md-4, .col-md-6, .col-md-12 {
@@ -90,11 +79,11 @@
     }
     .info {
         .badge-extra {
+            width: auto;
             margin: 0 8px 0 0;
         }
         i {
             &.fa {
-                margin: 0 8px 0 8px;
                 &:hover {
                     cursor: pointer;
                 }
@@ -103,69 +92,69 @@
     }
 </style>
 <script>
-  import ChatroomsDropdown from './ChatroomsDropdown'
+    import ChatroomsDropdown from './ChatroomsDropdown'
 
-  export default {
-    components: {
-      ChatroomsDropdown
-    },
-    data () {
-      return {
-        user: null,
-        editor: null,
-        input: null,
-      }
-    },
-    computed: {
-        receiver_id () {
-            return this.$parent.receiver_id
+    export default {
+        components: {
+            ChatroomsDropdown,
         },
-        bot_id () {
-            return this.$parent.bot_id
-        }
-    },
-    methods: {
-      keyup (e) {
-        this.$emit('typing', this.user)
-      },
-      keydown (e) {
-        if (e.keyCode === 13 && !e.shiftKey) {
-          e.preventDefault()
-          this.sendMessage()
-        }
-      },
-      sendMessage () {
+        data () {
+            return {
+                user: null,
+                editor: null,
+                input: null,
+            }
+        },
+        computed: {
+            receiver_id () {
+                return this.$parent.receiver_id
+            },
+            bot_id () {
+                return this.$parent.bot_id
+            }
+        },
+        methods: {
+            keyup (e) {
+                this.$emit('typing', this.user)
+            },
+            keydown (e) {
+                if (e.keyCode === 13 && !e.shiftKey) {
+                    e.preventDefault()
+                    this.sendMessage()
+                }
+            },
+            sendMessage () {
 
-        let msg = this.editor.bbcode().trim()
+                let msg = this.editor.bbcode().trim()
 
-        if (msg !== null && msg !== '') {
-            this.$emit('message-sent', {
-                message: msg,
-                save: true,
-                user_id: this.user.id,
-                receiver_id: this.receiver_id,
-                bot_id: this.bot_id,
-            });
+                if (msg !== null && msg !== '') {
+                    this.$emit('message-sent', {
+                        message: msg,
+                        save: true,
+                        user_id: this.user.id,
+                        receiver_id: this.receiver_id,
+                        bot_id: this.bot_id,
+                    });
 
-            this.input.html('');
-        }
+                    this.input.html('');
+                }
 
-      }
-    },
-    created() {
-      this.user = this.$parent.auth
-    },
-    mounted () {
-      this.editor = $('#chat-message').wysibb()
+            }
+        },
+        created() {
+            this.user = this.$parent.auth
+        },
+        mounted () {
+            this.editor = $('#chat-message').wysibb()
 
-      // Initialize emojis
-      emoji.textcomplete()
+            // Initialize emojis
+            emoji.textcomplete()
 
-      this.input = $('.wysibb-body')
+            this.input = $('.wysibb-body')
 
-      this.input.keyup(this.keyup)
-      this.input.keydown(this.keydown)
+            this.input.keyup(this.keyup)
+            this.input.keydown(this.keydown)
 
+        }
     }
-  }
 </script>
\ No newline at end of file

From 8628911c1081d7d58eb3003fa1e14161c8b4a8e8 Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:54:17 -0500
Subject: [PATCH 05/14] (Update) ChatMessages Vue

Reduce bot size.
---
 resources/js/components/chat/ChatMessages.vue | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/resources/js/components/chat/ChatMessages.vue b/resources/js/components/chat/ChatMessages.vue
index b60a8b2b51..12a0df373a 100644
--- a/resources/js/components/chat/ChatMessages.vue
+++ b/resources/js/components/chat/ChatMessages.vue
@@ -1,9 +1,8 @@
 <template>
     <div class="messages">
-        <ul class="list-group">
+        <ul class="list-group" id="frameList">
             <li class="sent" v-for="message in messages">
-
-                <a v-if="message.user.id !== 1" target="_blank"
+                <a v-if="message.user && message.user != null && message.user.id > 1" target="_blank"
                    v-tooltip="`${message.user.username}'s profile`"
                    :href="`/${message.user.username}.${message.user.id}`">
                     <img class="chat-user-image"
@@ -11,52 +10,38 @@
                          :src="message.user.image ? `/files/img/${message.user.image}` : '/img/profile.png'"
                          alt=""/>
                 </a>
-
                 <a v-if="message.bot && message.bot.id > 0 && (!message.user || message.user.id < 2)" target="_blank"
                    v-tooltip="`${message.bot.name}'s profile`"
                    :href="`/bot.2`">
-                    <img class="chat-user-image"
+                    <img class="chat-bot-image"
                          :style="`border: 3px solid ${message.bot.color};`"
                          :src="`/img/emojione/${message.bot.emoji}.png`"
                          alt=""/>
                 </a>
-
-                <h4 v-if="message.user.id !== 0" class="list-group-item-heading">
-
+                <h4 v-if="message.user.id !== 1" class="list-group-item-heading">
                     <span class="badge-user text-bold">
-
                         <i v-if="(message.user && message.user.id > 1) || (message.bot && message.bot.id >= 1)" v-tooltip="message.user.group.name"
                            :class="message.user.group.icon">
                         </i>
                         <i v-if="message.user && message.user.id <= 1 && (!message.bot || message.bot.id < 1)" v-tooltip=""
                            class="fas fa-bell">
                         </i>
-
                         <a v-if="message.user && message.user.id > 1" v-tooltip="message.user && message.user.id > 1 && message.user.id !== $parent.auth.id ? `Private Message` : message.user.username"
                            @click="pmUser(message.user)"
                            :style="userStyles(message.user)">
 					        {{message.user.username}}
                         </a>
-
-                        <a v-if="message.bot && message.bot.id >= 1 && (!message.user || message.user.id < 2)" v-tooltip="message.bot && message.bot.id > 0 ? message.bot.name : message.bot.name"
-                           :style="userStyles(message.user)">
-					        {{message.bot.name}}
-                        </a>
-
                         <!--<i v-if="canMod(message)"-->
                         <!--v-tooltip="`Edit Message`"-->
                         <!--@click="editMessage(message)"-->
                         <!--class="fa fa-edit text-blue">-->
 
                         <!--</i>-->
-
                         <i v-if="message.user.id != 1 && canMod(message)"
                            v-tooltip="`Delete Message`"
                            @click="deleteMessage(message.id)"
                            class="fa fa-times text-red">
-
                         </i>
-
 					</span>
                     <a v-if="message.user && message.user.id > 1 && message.user.id != $parent.auth.id" v-tooltip="message.user && message.user.id > 1 && message.user.id !== $parent.auth.id ? `Private Message` : message.user.username"
                        @click.prevent="$parent.forceMessage(message.user.username)">
@@ -69,9 +54,23 @@
                     <span class="text-muted">
                         {{ message.created_at | fromNow }}
                     </span>
-
                 </h4>
-                <div @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright' : 'text-bright')"
+                <h4 v-if="message.user.id == 1" class="list-group-item-heading">
+                    <i v-if="message.user && message.user.id <= 1 && (!message.bot || message.bot.id < 1)" v-tooltip=""
+                       class="fas fa-bell">
+                    </i>
+                    <a v-if="message.bot && message.bot.id >= 1 && (!message.user || message.user.id < 2)" v-tooltip="message.bot && message.bot.id > 0 ? message.bot.name : message.bot.name"
+                       :style="userStyles(message.user)" class="text-small">
+                        {{message.bot.name}}
+                    </a>
+                    <span class="text-muted">
+                        {{ message.created_at | fromNow }}
+                    </span>
+                </h4>
+                <div v-if="message.user.id > 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright' : 'text-bright')"
+                     v-html="message.message">
+                </div>
+                <div v-if="message.user.id == 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright text-small' : 'text-bright text-small')"
                      v-html="message.message">
                 </div>
             </li>
@@ -82,6 +81,12 @@
     .pointee {
         cursor: pointer;
     }
+    .sent {
+        margin: 2px 0 2px 0;
+    }
+    .text-small {
+        font-size: 14px !important;
+    }
 </style>
 <script>
   import moment from 'moment'

From 1638e64e5ae7c0d0817413a37b6735ef6751f62f Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:54:38 -0500
Subject: [PATCH 06/14] (Update) ChatroomsDropdown Vue

Small design change.
---
 .../js/components/chat/ChatroomsDropdown.vue  | 59 +++++++------------
 1 file changed, 22 insertions(+), 37 deletions(-)

diff --git a/resources/js/components/chat/ChatroomsDropdown.vue b/resources/js/components/chat/ChatroomsDropdown.vue
index 61bb07a0eb..62527c85b7 100644
--- a/resources/js/components/chat/ChatroomsDropdown.vue
+++ b/resources/js/components/chat/ChatroomsDropdown.vue
@@ -1,44 +1,29 @@
 <template>
-    <div class="input-group chat-dropdown">
-        <select id="currentChatroom" v-model="selected" class="form-control" @change="changedRoom">
-            <option value="0" selected disabled>Join a room...</option>
-            <option v-for="chatroom in chatrooms" :value="chatroom.id">{{ chatroom.name }}</option>
-        </select>
-    </div>
+    <select id="currentChatroom" v-model="selected" @change="changedRoom">
+        <option value="0" selected disabled>Join a room</option>
+        <option v-for="chatroom in chatrooms" :value="chatroom.id">{{ chatroom.name }}</option>
+    </select>
 </template>
-<style lang="scss" scoped>
-.chat-dropdown {
-    width: 100%;
 
-    .form-control {
-        margin: 0;
-    }
-
-    .input-group-addon {
-        background-color: transparent;
-        border: none;
-    }
-}
-</style>
 <script>
-export default {
-    props: {
-        current: { type: Number, default: 1 },
-        chatrooms: { required: true }
-    },
-    data() {
-        return {
-            selected: 1,
-        };
-    },
-    methods: {
-        changedRoom(event) {
-            this.$emit('changedRoom', this.selected);
+    export default {
+        props: {
+            current: { type: Number, default: 1 },
+            chatrooms: { required: true }
+        },
+        data() {
+            return {
+                selected: 1,
+            };
+        },
+        methods: {
+            changedRoom(event) {
+                this.$emit('changedRoom', this.selected);
+                this.selected = 0;
+            },
+        },
+        created() {
             this.selected = 0;
         },
-    },
-    created() {
-        this.selected = 0;
-    },
-};
+    };
 </script>

From 59bb0d198be5c95b03e31f539c32d5c35e1747d7 Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:55:03 -0500
Subject: [PATCH 07/14] (Update) ChatUserList Vue

For the js error.
---
 resources/js/components/chat/ChatUserList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/chat/ChatUserList.vue b/resources/js/components/chat/ChatUserList.vue
index e08923574c..8d99ac24fa 100644
--- a/resources/js/components/chat/ChatUserList.vue
+++ b/resources/js/components/chat/ChatUserList.vue
@@ -9,7 +9,7 @@
                    v-tooltip="`${user.username}'s profile`"
                    :href="`/${user.username}.${user.id}`">
                     <img class="chat-user-image"
-                         :style="`border: 3px solid ${user.chat_status.color};`"
+                         :style="user && user.hasOwnProperty('chat_status') && user.chat_status.hasOwnProperty('color') ? `border: 3px solid ${user.chat_status.color};` : ``"
                          :src="user.image ? `/files/img/${user.image}` : '/img/profile.png'"
                          alt=""/>
                 </a>
@@ -51,7 +51,7 @@
     ],
     methods: {
       userStyles (user) {
-        return `cursor: pointer; color: ${user.group.color}; background-image: ${user.group.effect};`
+        return user && user.group && user.group.hasOwnProperty('color') ? `cursor: pointer; color: ${user.group.color}; background-image: ${user.group.effect};` : `cursor: pointer;`
       }
     }
   }

From c1cedd37377bc6149fab007522fb441218094770 Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:55:20 -0500
Subject: [PATCH 08/14] (Update) Bluetopia JS

Not needed.
---
 resources/js/unit3d/blutopia.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/resources/js/unit3d/blutopia.js b/resources/js/unit3d/blutopia.js
index b7cf3073ce..ecd4ab4a96 100644
--- a/resources/js/unit3d/blutopia.js
+++ b/resources/js/unit3d/blutopia.js
@@ -9,7 +9,6 @@ $('img.img-tor-poster, i.img-tor-poster').popover({
         return '<img src="' + c + '" class="img-thumbnail torrent-poster-popup">';
     },
 });
-
 $(document).ready(function() {
     $(window).scroll(function() {
         if ($(this).scrollTop() > 50) {
@@ -18,7 +17,6 @@ $(document).ready(function() {
             $('#back-to-top').fadeOut();
         }
     });
-
     $('#back-to-top').click(function() {
         $('#back-to-top').tooltip('hide');
         $('body,html').animate({ scrollTop: 0 }, 800);
@@ -33,7 +31,6 @@ $(document).ready(function() {
         pause: 'hover',
     });
 });
-
 $(document).ready(function() {
     $('[data-toggle="tooltip"]').tooltip();
-});
+});
\ No newline at end of file

From 708b5c3335ca41495662a6e7a71e2bee5d55eaa0 Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:55:35 -0500
Subject: [PATCH 09/14] (Update) Chatbox SASS

Chat bot image.
---
 resources/sass/chat/chatbox.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/sass/chat/chatbox.scss b/resources/sass/chat/chatbox.scss
index b4362decac..4570489093 100644
--- a/resources/sass/chat/chatbox.scss
+++ b/resources/sass/chat/chatbox.scss
@@ -1,7 +1,10 @@
-#frame {
+#frameBody {
     height: 92vh;
     min-height: 300px;
     max-height: 590px;
+}
+#frame {
+    height: 100%;
     background: #E6EAEA;
     #sidepanel {
         float: left;
@@ -392,7 +395,6 @@
                 margin-left: 10px;
                 max-height: 535px;
                 overflow-y: auto;
-
                 li {
                     position: relative;
                     display: block;
@@ -456,6 +458,14 @@
                                 float: left;
                             }
 
+                            &.chat-bot-image {
+                                border: 3px solid #7289da;
+                                margin-right: 5px;
+                                padding: 0;
+                                width: 22px;
+                                border-radius: 50%;
+                                float: left;
+                            }
                         }
 
                         color: #2C4151;

From 82727dc08b5c5e329644ffe4029889179929e8ec Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:56:04 -0500
Subject: [PATCH 10/14] (Update) Custom SASS

Update fluid table.
---
 resources/sass/main/_custom.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/resources/sass/main/_custom.scss b/resources/sass/main/_custom.scss
index cb401c2954..5312217c87 100755
--- a/resources/sass/main/_custom.scss
+++ b/resources/sass/main/_custom.scss
@@ -7668,6 +7668,15 @@ select.icon-right i {
     line-height: 36px;
 }
 
+.width-table { width: 100%; display: table; }
+.width-25 { width: 25%; display: table-cell; text-align: left; }
+.width-75 { width: 75%; display: table-cell; text-align: right; }
+
+@media screen and (max-width: 1440px) {
+    .width-25 { width: 100%; display: block; }
+    .width-75 { width: 100%; display: block; }
+}
+
 .promotional {
     padding: 35px 0 65px;
     text-align: center;

From 8cd7317e4563ae241d4bc9a9cc4070bcfabc937c Mon Sep 17 00:00:00 2001
From: singularity43 <46550600+singularity43@users.noreply.github.com>
Date: Sun, 10 Feb 2019 20:57:53 -0500
Subject: [PATCH 11/14] (Update) Chatbox Vue

Remove console.log
---
 resources/js/components/chat/Chatbox.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/components/chat/Chatbox.vue b/resources/js/components/chat/Chatbox.vue
index d8e963222d..e6ef7b1480 100644
--- a/resources/js/components/chat/Chatbox.vue
+++ b/resources/js/components/chat/Chatbox.vue
@@ -422,7 +422,6 @@
                 axios.get('/api/chat/echoes').then(response => {
                     this.echoes = response.data.data;
                     this.echoes = this.sortEchoes(this.echoes);
-                    console.log(this.echoes);
                     this.boot = 1;
                 })
             },
@@ -889,7 +888,6 @@
                         if(e.message.bot && e.message.bot != null && e.message.bot.id != this.bot) return false;
                         if(e.message.target && e.message.target != null && e.message.target.id != this.target) return false;
                         this.messages.push(e.message);
-                        console.log(e);
                         if(this.bot && this.bot > 0) {
                             this.handleMessage('bot', this.bot, e.message);
                         }

From c9aadb8c5c3dc474cb9deaa9ce10d36629e93c3f Mon Sep 17 00:00:00 2001
From: HDVinnie <unit3d@protonmail.com>
Date: Mon, 11 Feb 2019 07:47:06 +0000
Subject: [PATCH 12/14] Apply fixes from StyleCI

---
 app/Http/Controllers/API/ChatController.php | 11 ++++-------
 app/Repositories/ChatRepository.php         | 12 ++++++------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/Http/Controllers/API/ChatController.php b/app/Http/Controllers/API/ChatController.php
index c7d7fc0136..4f9d1f1f82 100644
--- a/app/Http/Controllers/API/ChatController.php
+++ b/app/Http/Controllers/API/ChatController.php
@@ -160,7 +160,7 @@ public function createMessage(Request $request)
             $bot_dirty = 1;
         }
 
-        if($bot_dirty == 1) {
+        if ($bot_dirty == 1) {
             $expiresAt = Carbon::now()->addMinutes(60);
             cache()->put('bots', $bots, $expiresAt);
         }
@@ -196,15 +196,12 @@ public function createMessage(Request $request)
             foreach ($bots as $bot) {
                 if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '/'.$bot->command) {
                     $which = 'echo';
-                }
-                else if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '!'.$bot->command) {
+                } elseif ($message && substr($message, 0, 1 + (strlen($bot->command))) == '!'.$bot->command) {
                     $which = 'public';
-                }
-                else if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '@'.$bot->command) {
+                } elseif ($message && substr($message, 0, 1 + (strlen($bot->command))) == '@'.$bot->command) {
                     $message = substr($message, 1 + strlen($bot->command), strlen($message));
                     $which = 'private';
-                }
-                else if ($message && $receiver_id == 1 && $bot->id == $bot_id) {
+                } elseif ($message && $receiver_id == 1 && $bot->id == $bot_id) {
                     if ($message && substr($message, 0, 1 + (strlen($bot->command))) == '/'.$bot->command) {
                         $message = substr($message, 1 + strlen($bot->command), strlen($message));
                     }
diff --git a/app/Repositories/ChatRepository.php b/app/Repositories/ChatRepository.php
index 014606dbe1..58eda9b349 100644
--- a/app/Repositories/ChatRepository.php
+++ b/app/Repositories/ChatRepository.php
@@ -94,7 +94,7 @@ public function echoes($user_id)
         ])->where(function ($query) use ($user_id) {
             $query->where('user_id', '=', $user_id);
         })
-            ->orderBy('id','asc')
+            ->orderBy('id', 'asc')
             ->get();
     }
 
@@ -192,7 +192,7 @@ public function privateMessage($user_id, $room_id, $message, $receiver = null, $
         }
         $message = $this->htmlifyMessage($message);
 
-        if($bot != null) {
+        if ($bot != null) {
             $save = $this->message->create([
                 'user_id' => $user_id,
                 'chatroom_id' => 0,
@@ -200,8 +200,7 @@ public function privateMessage($user_id, $room_id, $message, $receiver = null, $
                 'receiver_id' => $receiver,
                 'bot_id' => $bot,
             ]);
-        }
-        else {
+        } else {
             $save = $this->message->create([
                 'user_id' => $user_id,
                 'chatroom_id' => 0,
@@ -224,9 +223,10 @@ public function privateMessage($user_id, $room_id, $message, $receiver = null, $
         }
         event(new Chatter('new.message', $receiver, new ChatMessageResource($message)));
 
-        if($receiver != 1) {
+        if ($receiver != 1) {
             event(new Chatter('new.ping', $receiver, ['type' => 'target', 'id' => $user_id]));
         }
+
         return $message;
     }
 
@@ -267,7 +267,7 @@ public function botMessages($sender_id, $bot_id)
             'receiver.chatStatus',
         ])->where(function ($query) use ($sender_id,$bot_id) {
             $query->whereRaw('(user_id = ? and receiver_id = ?)', [$sender_id, 1])->orWhereRaw('(user_id = ? and receiver_id = ?)', [1, $sender_id]);
-        })->where('bot_id','=',$bot_id)
+        })->where('bot_id', '=', $bot_id)
             ->orderBy('id', 'desc')
             ->limit(config('chat.message_limit'))
             ->get();

From 9eeaaec4b61e0ad2229b84714440a0b2380da235 Mon Sep 17 00:00:00 2001
From: HDVinnie <unit3d@protonmail.com>
Date: Mon, 11 Feb 2019 08:23:37 -0500
Subject: [PATCH 13/14] Update ChatMessages.vue

---
 resources/js/components/chat/ChatMessages.vue | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/resources/js/components/chat/ChatMessages.vue b/resources/js/components/chat/ChatMessages.vue
index 12a0df373a..e029ef106b 100644
--- a/resources/js/components/chat/ChatMessages.vue
+++ b/resources/js/components/chat/ChatMessages.vue
@@ -2,21 +2,19 @@
     <div class="messages">
         <ul class="list-group" id="frameList">
             <li class="sent" v-for="message in messages">
-                <a v-if="message.user && message.user != null && message.user.id > 1" target="_blank"
-                   v-tooltip="`${message.user.username}'s profile`"
-                   :href="`/${message.user.username}.${message.user.id}`">
-                    <img class="chat-user-image"
-                         :style="`border: 3px solid ${message.user.chat_status.color};`"
-                         :src="message.user.image ? `/files/img/${message.user.image}` : '/img/profile.png'"
-                         alt=""/>
-                </a>
-                <a v-if="message.bot && message.bot.id > 0 && (!message.user || message.user.id < 2)" target="_blank"
-                   v-tooltip="`${message.bot.name}'s profile`"
-                   :href="`/bot.2`">
-                    <img class="chat-bot-image"
-                         :style="`border: 3px solid ${message.bot.color};`"
-                         :src="`/img/emojione/${message.bot.emoji}.png`"
-                         alt=""/>
+	    
+                <a target="_blank" v-tooltip="
+                        `${message.user.username}${
+                            message.user.title ? ' (' + message.user.title + ')' : '\'s Profile'
+                        }`"
+                    :href="`/${message.user.username}.${message.user.id}`">
+                    <img
+                        v-if="message.user.id !== 1"
+                        class="chat-user-image"
+                        :style="`border: 3px solid ${message.user.chat_status.color};`"
+                        :src="message.user.image ? `/files/img/${message.user.image}` : '/img/profile.png'"
+                        alt=""
+                    />
                 </a>
                 <h4 v-if="message.user.id !== 1" class="list-group-item-heading">
                     <span class="badge-user text-bold">
@@ -31,12 +29,13 @@
                            :style="userStyles(message.user)">
 					        {{message.user.username}}
                         </a>
+			
                         <!--<i v-if="canMod(message)"-->
                         <!--v-tooltip="`Edit Message`"-->
                         <!--@click="editMessage(message)"-->
                         <!--class="fa fa-edit text-blue">-->
-
                         <!--</i>-->
+			
                         <i v-if="message.user.id != 1 && canMod(message)"
                            v-tooltip="`Delete Message`"
                            @click="deleteMessage(message.id)"
@@ -70,7 +69,7 @@
                 <div v-if="message.user.id > 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright' : 'text-bright')"
                      v-html="message.message">
                 </div>
-                <div v-if="message.user.id == 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright text-small' : 'text-bright text-small')"
+                <div v-if="message.user.id == 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright text-small' : 'text-bright text-small')" :style="display: inline-block; margin-top: 5px;"
                      v-html="message.message">
                 </div>
             </li>
@@ -159,4 +158,4 @@
           clearInterval(this.interval)
       }
   }
-</script>
\ No newline at end of file
+</script>

From 0a560683b779586446c72eac8a4299ca63f89379 Mon Sep 17 00:00:00 2001
From: HDVinnie <unit3d@protonmail.com>
Date: Mon, 11 Feb 2019 08:54:21 -0500
Subject: [PATCH 14/14] Update ChatMessages.vue

---
 resources/js/components/chat/ChatMessages.vue | 58 +++++++++----------
 1 file changed, 27 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/chat/ChatMessages.vue b/resources/js/components/chat/ChatMessages.vue
index e029ef106b..514dc83000 100644
--- a/resources/js/components/chat/ChatMessages.vue
+++ b/resources/js/components/chat/ChatMessages.vue
@@ -1,13 +1,17 @@
 <template>
     <div class="messages">
-        <ul class="list-group" id="frameList">
+        <ul class="list-group">
             <li class="sent" v-for="message in messages">
-	    
-                <a target="_blank" v-tooltip="
+
+                <a
+                    target="_blank"
+                    v-tooltip="
                         `${message.user.username}${
                             message.user.title ? ' (' + message.user.title + ')' : '\'s Profile'
-                        }`"
-                    :href="`/${message.user.username}.${message.user.id}`">
+                        }`
+                    "
+                    :href="`/${message.user.username}.${message.user.id}`"
+                >
                     <img
                         v-if="message.user.id !== 1"
                         class="chat-user-image"
@@ -16,31 +20,43 @@
                         alt=""
                     />
                 </a>
-                <h4 v-if="message.user.id !== 1" class="list-group-item-heading">
+
+                <h4 class="list-group-item-heading">
+
                     <span class="badge-user text-bold">
+
                         <i v-if="(message.user && message.user.id > 1) || (message.bot && message.bot.id >= 1)" v-tooltip="message.user.group.name"
                            :class="message.user.group.icon">
                         </i>
                         <i v-if="message.user && message.user.id <= 1 && (!message.bot || message.bot.id < 1)" v-tooltip=""
                            class="fas fa-bell">
                         </i>
+
                         <a v-if="message.user && message.user.id > 1" v-tooltip="message.user && message.user.id > 1 && message.user.id !== $parent.auth.id ? `Private Message` : message.user.username"
                            @click="pmUser(message.user)"
                            :style="userStyles(message.user)">
 					        {{message.user.username}}
                         </a>
-			
+
+                        <a v-if="message.bot && message.bot.id >= 1 && (!message.user || message.user.id < 2)" v-tooltip="message.bot && message.bot.id > 0 ? message.bot.name : message.bot.name"
+                           :style="userStyles(message.user)">
+					        {{message.bot.name}}
+                        </a>
+
                         <!--<i v-if="canMod(message)"-->
                         <!--v-tooltip="`Edit Message`"-->
                         <!--@click="editMessage(message)"-->
                         <!--class="fa fa-edit text-blue">-->
+
                         <!--</i>-->
-			
+
                         <i v-if="message.user.id != 1 && canMod(message)"
                            v-tooltip="`Delete Message`"
                            @click="deleteMessage(message.id)"
                            class="fa fa-times text-red">
+
                         </i>
+
 					</span>
                     <a v-if="message.user && message.user.id > 1 && message.user.id != $parent.auth.id" v-tooltip="message.user && message.user.id > 1 && message.user.id !== $parent.auth.id ? `Private Message` : message.user.username"
                        @click.prevent="$parent.forceMessage(message.user.username)">
@@ -50,26 +66,12 @@
                        @click.prevent="$parent.forceGift(message.user.username)">
                         <i class="fas fa-gift pointee"></i>
                     </a>
-                    <span class="text-muted">
-                        {{ message.created_at | fromNow }}
-                    </span>
-                </h4>
-                <h4 v-if="message.user.id == 1" class="list-group-item-heading">
-                    <i v-if="message.user && message.user.id <= 1 && (!message.bot || message.bot.id < 1)" v-tooltip=""
-                       class="fas fa-bell">
-                    </i>
-                    <a v-if="message.bot && message.bot.id >= 1 && (!message.user || message.user.id < 2)" v-tooltip="message.bot && message.bot.id > 0 ? message.bot.name : message.bot.name"
-                       :style="userStyles(message.user)" class="text-small">
-                        {{message.bot.name}}
-                    </a>
-                    <span class="text-muted">
+                    <span v-if="message.user.id !== 1" class="text-muted">
                         {{ message.created_at | fromNow }}
                     </span>
+
                 </h4>
-                <div v-if="message.user.id > 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright' : 'text-bright')"
-                     v-html="message.message">
-                </div>
-                <div v-if="message.user.id == 1" @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright text-small' : 'text-bright text-small')" :style="display: inline-block; margin-top: 5px;"
+                <div @click="checkBot($event,message)" :class="(message.user.id === 1 ? 'system text-bright' : 'text-bright')" :style="display: inline-block; margin-top: 5px;"
                      v-html="message.message">
                 </div>
             </li>
@@ -80,12 +82,6 @@
     .pointee {
         cursor: pointer;
     }
-    .sent {
-        margin: 2px 0 2px 0;
-    }
-    .text-small {
-        font-size: 14px !important;
-    }
 </style>
 <script>
   import moment from 'moment'