Simple VueJS chatbot http://www.webpackbin.com/EyeW_uel-

gistfile1.txt

<template>
  <div class="chatter">
    <div class="controls">
      <input type="text" placeholder="Your message..." v-model="message" @keyup.enter="userMessage"/>
      <button @click="userMessage">Send</button>
    </div>
    <div class="messages">
      <div class="message" v-for="message in messages">
        <p>{{ timestamp() }} <strong>{{ message.sender }}</strong>: {{ message.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      robot: 'Mobot',
      user: 'You',
      messages: [],
      message: null
    }
  },
  
  methods: {
    userMessage () {
      this.sendMessage(this.user, this.message)
      this.parseMessage()
      this.message = null
    },
    
    robotMessage (message, timeout=400) {
      window.setTimeout(()=>{
        this.sendMessage(this.robot, message)
      }, timeout);
    },
    
    sendMessage (sender, message) {
      this.messages.unshift({
        'sender': sender,
        'text': message
      })
    },
    
    parseMessage () {
      if(this.match('what[^ ]* up') || this.match('sup') || this.match('how are you'))
        this.robotMessage('I\'m fine thank you.')
      if(this.match('bingo!'))
        this.robotMessage('ding, ding, ding! We have a whiner')
    },
    
    match (regex) {
      return new RegExp(regex).test(this.message.toLowerCase())
    },
    
    timestamp () {
      return new Date().toTimeString().substring(0,8)
    }
  },
  
  ready () {
    this.robotMessage('Greetings! I am '+this.robot+', a helpful bit of AI to make everything easier for you.', 500)
  }
}
</script>

<style scoped>
  .chatter {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  .controls {
    padding: 1em;
    background: #ccc;
    text-align: right;
  }
  
  .controls * {
    font-size: 1em;
    padding: .5em;
  }
  
  .message {
    padding: .5em .25em;
    border-bottom: 1px solid #9e9e9e;
  }
</style>