Add /me;

app.css

@@ -76,3 +76,7 @@ body {
 	max-height: 2em;
 	margin-right: 5px;
 }
+
+.me-message {
+	background-color: orange;
+}

app.js

@@ -87,11 +87,12 @@ let kara = new Vue({
         this.scrollDown();
     },
     methods: {
-        addMessage(body, bot) {
+        addMessage(body, bot, me = false) {
             this.messages.push({
                 body: body,
                 bot: bot,
                 command: body.search('/') === 0,
+                me: me,
                 time: Date.now()
             })
         },
@@ -132,15 +133,17 @@ let kara = new Vue({
                 return false;
             }
 
-            this.userMessage(this.chatbox);
+            if (this.chatbox.search('/me') !== 0) {
+                this.userMessage(this.chatbox);
+            }
             this.scrollDown();
             this.react(this.chatbox);
             this.chatbox = '';
         },
-        react(message) {
+        react(message, recursive = false) {
             this.isTyping = true;
 
-            if (message.search('/') === 0) {
+            if (message.search('/') === 0 && !recursive) {
                 setTimeout(() => {
                     this.processCommands(message);
 
@@ -185,6 +188,10 @@ let kara = new Vue({
             if (this.checkForCommands(message, 'joke')) {
                 this.tellJoke(this.checkForCommands(message, 'joke'))
             }
+
+            if (this.checkForCommands(message, 'me')) {
+                this.meMessage(this.checkForCommands(message, 'me'))
+            }
         },
         checkForCommands(message, commands) {
             if (!Array.isArray(commands)) {
@@ -561,6 +568,10 @@ let kara = new Vue({
 
             this.updateStorage();
         },
+        meMessage(message) {
+            this.addMessage(this.username  + ' ' + message, false, true);
+            this.react(message, true);
+        },
         clearStorage() {
             localStorage.clear();
             location.reload();

index.html

@@ -37,7 +37,7 @@
                 {{ message.body }}
                 <br/>
             </div>
-            <div :class="'message user-message float-right' + (message.command ? ' command-message' : '')" v-else>
+            <div :class="'message user-message float-right' + (message.command ? ' command-message' : '') + (message.me ? ' me-message' : '')" v-else>
                 {{ message.body }}
                 <br/>
             </div>