write code that imitates a fake chatbot using a modal where it shows the human users previously typedmesages and the ai chat bots messages all within html. Create the modal fake chathistory having 4 overall messages. With 2 messages from the bot and 2 messages from the human .
Sure, here's an example code snippet that shows a modal with a fake chat history:

```html
<!DOCTYPE html>
<html>
<head>
	<title>Fake Chatbot Modal</title>
	<style>
		/* Style for the modal */
		.modal {
		  display: none; 
		  position: fixed; 
		  z-index: 1; 
		  padding-top: 100px; 
		  left: 0;
		  top: 0;
		  width: 100%; 
		  height: 100%; 
		  overflow: auto; 
		  background-color: rgb(0,0,0); 
		  background-color: rgba(0,0,0,0.4); 
		}

		/* Style for the modal content */
		.modal-content {
		  background-color: #fefefe;
		  margin: auto;
		  padding: 20px;
		  border: 1px solid #888;
		  width: 80%;
		}

		/* Style for the close button */
		.close {
		  color: #aaaaaa;
		  float: right;
		  font-size: 28px;
		  font-weight: bold;
		}

		.close:hover,
		.close:focus {
		  color: #000;
		  text-decoration: none;
		  cursor: pointer;
		}
	</style>
</head>
<body>

	<!-- Button to open the modal -->
	<button onclick="openModal()">Open Modal</button>

	<!-- The Modal -->
	<div id="myModal" class="modal">

	  <!-- Modal content -->
	  <div class="modal-content">
	    <span class="close" onclick="closeModal()">&times;</span>
	    <h2>Chatbot History</h2>
	    <div id="chat-history">
	    	<!-- Human message -->
	    	<p><strong>You:</strong> Hi, how are you?</p>
	    	<!-- Bot message -->
	    	<p><strong>Bot:</strong> I'm good, thank you for asking. How can I assist you today?</p>
	    	<!-- Human message -->
	    	<p><strong>You:</strong> I have a question about your product.</p>
	    	<!-- Bot message -->
	    	<p><strong>Bot:</strong> Sure, what's your question?</p>
	    </div>
	  </div>

	</div>

	<script>
		// Get the modal
		var modal = document.getElementById("myModal");

		// Get the chat history
		var chatHistory = document.getElementById("chat-history");

		// Open the modal
		function openModal() {
		  modal.style.display = "block";
		}

		// Close the modal
		function closeModal() {
		  modal.style.display = "none";
		}
	</script>

</body>
</html>
```html
This code snippet creates a modal window that displays a chat history with 4 messages - 2 from the bot and 2 from the human user. The chat history is stored in an HTML div element with the id "chat-history". To update the chat history with new messages from the user and the bot, you can use JavaScript to append new HTML elements to the chat history div.

Note that this is a very basic example and doesn't include any actual AI chatbot functionality. To create a functional chatbot, you would need to integrate natural language processing (NLP) and machine learning algorithms to understand and respond to user input.