怎么使用html+css+js实现简易版ChatGPT聊天机器人

代码如下：

	
	
	
	
		@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
		* {
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		  font-family: "Poppins", sans-serif;
		}
		body {
		  background: #4b5c66;
		}
		.container {
			--light-color: #fff;
			height: 580px;
			background: var(--light-color);
			bottom: 50px;
			right: 10px;
			box-shadow: 0px 0px 15px 0px black;
		}
		@media screen and (min-width:440px) {
			.container {
				position: fixed;
			}
		}
		.chat-header {
		  height: 60px;
		  display: flex;
		  align-items: center;
		  padding: 0px 30px;
		  background-color: #0652c0;
		  color: var(--light-color);
		  font-size: 1.5rem;
		}

		.chat-header .logo {
		  height: 35px;
		  width: 35px;
		  box-shadow: 0px 0px 10px 0px black;
		}
		.chat-header img {
		  height: 100%;
		  width: 100%;
		}
		.chat-header .title {
		  padding-left: 10px;
		}
		.chat-body {
		  height: 465px;
		  display: flex;
		  flex-direction: column;
		  padding: 8px 10px;
		  align-items: flex-end;
		  overflow-y: auto;
		}
		.chat-input {
		  height: 60px;
		  display: flex;
		  align-items: center;
		  border-top: 1px solid #ccc;
		}
		.input-sec {
		  flex: 9;
		}
		.send {
		  flex: 1;
		  padding-right: 4px;
		}
		#txtInput {
		  line-height: 30px;
		  padding: 8px 10px;
		  border: none;
		  outline: none;
		  caret-color: black;
		  font-size: 1rem;
		  width: 100%;
		}

		.chatbot-message,
		.user-message {
		  padding: 8px;
		  background: #ccc;
		  margin: 5px;
		  width: max-content;
		  border-radius: 10px 3px 10px 10px;
		}
		.chatbot-message {
		  background: #0652c0;
		  color: var(--light-color);
		  align-self: flex-start;
		  border-radius: 10px 10px 3px 10px;
		}