一百行代码实现简易版 ChatGPT 聊天机器人
@import url("/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;
}