Vue

by zelm25

HTML

<div id="app">
  <div id="window">
    <div class="typeBarContainer">
      <div class="typeBarInnerContainer">
                
        <div class="typeBar">
          <div class="click" @click="sendResponse">
            Send
          </div>
          <p>
          type in 'hello' to get the right response, any other input will be met with 'this is a response to your input'
          </p>
          <input type="text" placeholder="Type here" v-model="message" name="message">                
        </div>
      
        <div class="userMessageC">
          <div class="userMessage" v-for="(data, index) in messages" :key='index'>
            {{ data.message }}
          </div>
        </div>
        
        <div class="botMessageC" v-for="(data, index) in responses" :key='index'>         
          <div class="botMessage">
            {{ data.response }} 
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

CSS

#window {
   float: left;
   width: 100%;
 }
.botMessageC {
   width: 100%;
   float: left;
 }
 .userMessageC {
   float: right;
   width: 100%;
   position: relative;
   word-wrap: break-word;
 }
 .click {
   float: left;
   background: black;
   color: white;
   padding: 0.5%;
 }

Vue

new Vue({
  el: '#app',
 	data() {
    return {
      message: '',
      output: '',
      messages: [],
      response: '',
      responses: [],      
      input: "",
      text: ""
      }
  }, methods: {
    sendResponse() {
        this.messages.push({message: this.message})
        this.outputResponse(this.message);
    }, outputResponse(input){
      this.message = '';
      this.timer = setTimeout(() => {
        try {
            var output = input + "=" + eval(input);
        } catch (e) {

            var utterance = [
              ["hello"],
              ],intent = [
                ["hello back!"]
                ],fallback = ["this is a response to your input"];
            var text = (input.toLowerCase()).replace(/[^\w\s\d]/gi, "");
            
            if (this.compare(utterance, intent, text)) {
                output = this.compare(utterance, intent, text);
            } else {
                output = fallback[Math.floor(Math.random() * fallback.length)];
            } 
        }
          this.responses.push({response: output})
      }, 1000);
      }, compare(uttArr, intArr, string){
            var match;
            for (var x = 0; x < uttArr.length; x++) {
                for (var y = 0; y < intArr.length; y++) {
                    if (uttArr[x][y] == string) {
                        var matches = intArr[x];
                        match = matches[Math.floor(Math.random() * matches.length)];
                    }
                }
            }
            return match;
        } 
  }
  
})