JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
Input:
<input id="input" type="text" value="" />

<input type="button" value="Submit" onclick="$('#output').append('&gt; ').append($('#input').val()).append('<br/>').append(respond($('#input').val())).append('<br/>')" />

<input id="clear" type="button" value="Clear" onclick="$('#output').empty()" />

<div id="output"></div>

CSS

#output {
  margin: 10px 0 0 0;
  min-height: 100px;
  border: 1px solid #ccc;
}

JavaScript

var brain = [
	{ key: "hello", value: "Hello, please say the name of a book to get a review." },
  { key: "alice in wonderland", value: "The book Alice in Wonderland has a rating of 4 stars." },
  { key: "pemberley", value: "The book Pemberley has a rating of 2 stars." },
  { key: "bye", value: "Goodbye."	},
  { key: "help", value: "Please say the name of a book to get a review." }
];

function respond(input) {
	var result = "Sorry, I don't understand.";
  
	input = input.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g, '');

	for (var i in brain) {
  	var response = brain[i];
    if (input.indexOf(response.key.toLowerCase()) != -1) {
    	// Found a matching keyword.
      result = response.value;
      break;
    }
  }
  
  return result;
}